Question

选择菜单项时，我需要突出显示菜单按钮。如果我选择菜单项，则需要将当前类应用于（li）。

这就是我的尝试。

这是HTML，

  <ul>
     <li class="current"><a href="#">HOME</a></li>
     <li><a href="#">SERVICE</a></li>
     <li><a href="#">ABOUTUS</a></li>
     <li><a href="#">PROFILE</a></li>
     <li><a href="#">CONTACTUS</a></li>
  </ul>

这是Jquery，

var opener = {
  init:function()  { 
         this.menuselection();
   },
   menuselection:function(){
    $('ul li a').on('click', function (){
        $('ul li').addClass('current');
    });
   }
}
opener.init();

这是CSS，

.current a {
  color: #03c9a9;
}
a,
a:active,
a:focus {
  color: #fff;
}
a,
a:hover,
a:active,
a:focus {
  outline: 0;
  border: 0;
  text-decoration: none;
  color: #fff;
}

Demo

Answer 1

在上一条评论中使用此小修正

 $('ul li a').on('click', function (){
       $('ul li a').removeClass('current');
        $(this).addClass('current');
    });

Answer 2

使用$(this)获取当前元素，使用closest('li')获取li

var opener = {
  init:function()  { 
         this.menuselection();
   },
   menuselection:function(){
    $('ul li a').on('click', function (){
        $(this).closest('li').addClass('current');
    });
   }
}

否则，$('ul li')会将该类添加到所有 li元素

<强>更新

如果我选择$（'ul li'），然后应用当前类，那么我需要删除所有其他当前类，如果从其他li标签应用。

在将课程添加到$(this).closest('li')之前，请执行

$('ul li').removeClass('current');

Answer 3

您可以使用this。

 $('ul li a').on('click', function (){
        $(this).addClass('current');
    });

更新
如果从其他li标签应用，则删除所有其他当前类

$('ul li a').on('click', function (){
    $('ul li').removeClass('current');
    $(this).addClass('current');
 }

Answer 4

小提琴：http://jsfiddle.net/9bzc9j2q/3/

您需要从所有li中删除“当前”类，并将该类仅添加到所单击项目的父级。

$('ul li a').on('click', function (){
        $('ul li').removeClass('current');
        $(this).parent().addClass('current');
    });

Answer 5

在您的脚本中进行少量更改，从所有其他li标记中删除类当前值点击a元素后，将当前班级添加到最近的li。

var opener = { 
  init:function()  {        
         this.menuselection();
   },
   menuselection:function(){

    $('ul li a').on('mouseup', function (){
        $("li.current").removeClass("current");
        $(this).closest("li").addClass('current');
    });
   }    
}
opener.init();

从CSS中删除标签中的颜色。

<强> CSS：

.current a {
  color: #03c9a9;
}
a,
a:hover,
a:active,
a:focus {
  outline: 0;
  border: 0;
  text-decoration: none;
}
.li-logo {
  text-align: left;
}

DEMO

如何突出显示菜单按钮？

5 个答案: