正在更新列表项的类-jQuery

Updating class of list item - jQuery

本文关键字：-jQuery 列表 更新      更新时间：2023-09-26

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

 <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，准备出发。我感谢你的帮助。也许我处理问题不对，或者可能遗漏了一些愚蠢的东西？

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

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

演示：Fiddle（也在Fiddle中，您忘记了包含jQuery）

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

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

更新的fiddle：http://jsfiddle.net/mw5sgcLn/4/

相关文章：