更新列表项的类-jQuery

Question

很简单的问题，但是现在已经困扰了我近一个小时。 基本上，我想更新列表类onClick，然后在单击另一个项目时再次删除该类。

 <nav>
   <div class="menu-main-menu-container">
     <ul id="menu-main-menu" class="menu">
       <li class="current-menu-item">
         <a class="scroll" href="#top"><span>Home</span></a>
       </li>
       <li class="">
         <a class="scroll" href="#featured_work_anchor"><span>Featured Work</span></a>
       </li>
       <li class="">
         <a class="scroll" href="#about_contact_anchor"><span>About/Contact</span></a>
       </li>               
     </ul>
   </div>
 </nav>

jQuery的

$(document).ready(function() {
    $('#menu-main-menu li').on('click', changeClass);
});

function changeClass() {
    $('#menu-main-menu li').removeClass('current-menu-item');
    $(this).addClass('current-menu-item');
}

JSFiddle ，准备开始了。 感谢您的帮助。 也许我正在错误地解决问题，或者可能缺少一些愚蠢的东西？

Answer 1

我能看到的唯一问题是removeClass()函数，要么不传递任何参数以使li中的所有类都被删除，要么传递要删除的类名。

function changeClass() {
    $('#menu-main-menu li').removeClass('current-menu-item');
    $(this).addClass('current-menu-item');
}

演示： 小提琴 （也在小提琴中您忘了包含jQuery）

Answer 2

您需要传递被设置为当前元素的元素：

$(document).ready(function() {
  $('#menu-main-menu li').on('click', function(){
    changeClass($(this));
  });
});

function changeClass(element) {
  $('#menu-main-menu li').removeClass('current-menu-item');
  element.addClass('current-menu-item');
}

更新小提琴： http : //jsfiddle.net/mw5sgcLn/4/