如何突出显示菜单按钮？

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;
}

演示

Answer 1

用于$(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');