使用jQuery添加/删除活动类的ul列表？ [英] add/remove active class for ul list with jquery?

问题描述

我试图在每次单击时为列表项目移除并设置一个活动类。目前它正在删除选定的活动类，但未设置它。任何想法我缺少什么？

HTML

 < ul class =nav nav-list> 
< li class ='nav-header'>测试< / li> 
< li class =active>< a href =page1.php>第1页< / a>< / li> 
< li>< a href =page2.php>第2页< / a>< / li> 
< li>< a href =page3.php>第3页< / li> 
< / ul> 
  

jquery：

 < code $（'。nav-list'）。click（function（）{
 
 //console.log(\"Clicked）; 
 $（'。nav- （'active'）; 
 $（this）.addClass（'active'）; 
}）; 
  

解决方案

将指向由 .nav-list 选择的< ul> 。您可以使用委托！

$ b $

  $（'。nav-list'）。on（'click'，'li'，函数（）{
 $（'。nav-list li.active'）。removeClass（'active'）; 
 $（this）.addClass（'active'）; 
}） ; 
  

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?

HTML

<ul class="nav nav-list">
  <li class='nav-header'>Test</li>
  <li class="active"><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  <li><a href="page3.php">Page 3</li>
</ul>

jquery:

 $('.nav-list').click(function() {

    //console.log("Clicked");
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

解决方案

this will point to the <ul> selected by .nav-list. You can use delegation instead!

$('.nav-list').on('click', 'li', function() {
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

这篇关于使用jQuery添加/删除活动类的ul列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！