javascript - 如何突出显示菜单按钮？

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