javascript - 更新列表项的类 - 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');
}

演示:Fiddle (同样在 fiddle 中你忘记包含 jQuery)