Question

我正在尝试在点击时更改菜单图标和文字颜色。

在我的菜单中 <li>元素有一个超链接标记，其下面有2个孩子<span class="icon">和<div class="icon">我想要实现的是点击该类必须更改为

<span class="icon active"> <div class="icon active">当点击下一个菜单项时，必须删除此活动类

HTML CODE

<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 [Damm我迷路了]：

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

});

Answer 1

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

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

  });

Answer 2

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 3

你的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');
 });

菜单更改精灵和点击颜色

3 个答案: