菜单更改精灵和颜色点击

Question

我想改变我的菜单图标和点击文本的颜色。

在我的菜单

每个 <li>元素有一个超级链接标签有2个孩子在它下面<span class="icon">和<div class="icon">我试图做到的，是对点击类必须改变以

<span class="icon active"><div class="icon active">和下一个菜单项点击该活动类已被删除

JS Fiddel

HTML代码

<div id="grid"> 
    <div id="menuBase"> 
     <div id="menu"> 
     <ul> 
     <li><a href="#Page1" ><span class="icon" id="home"></span><div class="icon" id="mtext">Menu1&nbsp;&nbsp;</div></a></li> 
     <li><a href="#aboutPage"><span class="icon" id="about"></span><div class="icon" id="mtext">Menu2</div></a></li> 
     <li><a href=""><span class="icon" id="soln"></span><div class="icon" id="mtext">Menu 3</div></a></li> 
     <li><a href="#"><span class="icon" id="lab"></span><div class="icon" id="mtext">Menu4</div></a></li> 
     <li><a href="#"><span class="icon" id="port"></span><div class="icon" id="mtext">Menu5</div></a></li> 
     <li><a href="#"><span class="icon" id="contact"></span><div class="icon" id="mtext">Menu6</div ></a></li> 
     </ul> 
     </div> 
    </div> 
</div> 
​ 

CSS代码

#grid{ 
    width: 750px; 
    margin:0 auto; 
} 
#menuBase{ 
    background: #fff; 
    width:100%; 
    height:44px; 
    -webkit-border-radius: 90px 90px 0 0; 
    -moz-border-radius: 90px 90px 0 0; 
    border-radius: 90px 90px 0 0; 
    border-right:2px solid #fff; 

} 


#menu{ 
    background: #E1E1E3; 
    width:100%; 
    height:100%; 
    -webkit-border-radius: 99px 99px 0 0; 
    -moz-border-radius: 99px 99px 0 0; 
    border-radius: 99px 99px 0 0; 
    border-right: 1px #fff solid; 
    border: 2px #ccc solid; 
    border-right: none; 
    border-bottom: none; 
} 

#hrhead{ 
    background: #cccccc; 
    height: 3px; 
    -webkit-margin-before:0; 
    -webkit-margin-after:0; 
    border-bottom: 1px #ffffff solid; 
} 

#hrfoot{ 
    background: #cccccc; 
    height: 3px; 
    -webkit-margin-before:0; 
    -webkit-margin-after:0; 
    border-top: 1px #ffffff solid; 
} 

#menu ul{ 
    float:left; 
    width:100%; 
    padding-left:43px; 
    margin:0; 
    list-style-type:none; 
} 

#menu li{ 
    display: block; 
    float: left; 
    width:40px; 
    height: 25px; 
    margin-right: 68px; 
    margin-top: 11px; 
} 

#menu li:last-child{ 
    margin-right: 0px; 
} 

.icon{ 
    height:25px; 
    width: 40px; 
    display: block; 
    color:#777777; 
} 

#mtext{ 
    height:27px; 
    width: 80px; 
    display: block; 
    margin: 11px 0 0 -20px; 
    text-align: center; 

} 
#menu li a{ 
    text-decoration:none; 
} 
#menu li a:hover #mtext{ 
    color:#DC0000; 
} 
#menu li a:hover .icon{ 
    background-position-y:24px; 
} 

#home{ 
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0; 
} 

#about{ 
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0; 
} 

#soln{ 
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0; 
} 

#lab{ 
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0; 
} 

#port{ 
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0; 
} 

#contact{ 
    background: url(http://i47.tinypic.com/2nroe9k.png)0 0; 
} 

.active{ 
    background-position-y:24px !important; 
    color:#DC0000 !important; 
} 
​ 

jQuery的[达姆我失去了]：

$("#menu > ul > li > a").click(function(e){ 
    e.preventDefault(); 

}); 

​ 

Answer 1

DEMO：http://jsfiddle.net/VLXxR/7/

$("#menu > ul > li > a").click(function(e){ 
    e.preventDefault(); 
    $("#menu .icon").removeClass("active"); 
    $(this).find(".icon").addClass("active") 

    }); 

检查出removeClass的文档 - http://api.jquery.com/removeClass/

Answer 2

你的JS应该是这样的，FIDDLE

$("#menu > ul > li > a").click(function(e){ 
    e.preventDefault(); 
    $("#menu > ul > li > a > div,#menu > ul > li > a > span").removeClass('active'); 

    $('div',this).addClass('active'); 
    $('span',this).addClass('active'); 
}); 

Answer 3

DEMO：http://jsfiddle.net/VLXxR/8/

$("#menu > ul > li > a").click(function(e){ 
    e.preventDefault(); 
    $("#menu .icon").removeClass("active"); 
    $(this).children(".icon").addClass("active") 

    });