更新列表项的类 - jQuery

时间:2014-09-03 03:37:31

标签: javascript jquery html5

非常简单的问题,但现在已经困扰了我近一个小时。基本上,我想更新列表类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,准备出发了。我感谢任何帮助。也许我正在接近这个问题或者错过了一些愚蠢的事情?

2 个答案:

答案 0 :(得分:3)

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

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

演示:Fiddle(也是你忘了包含jQuery的小提琴)

答案 1 :(得分:1)

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

$(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/