使用jquery添加/删除ul列表的活动类？

我试图删除并设置每次单击它时列表项的活动类。目前它正在删除选定的活动类，但未设置它。任何想法我失踪？使用jquery添加/删除ul列表的活动类？

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

来源

2013-11-24 Paul

只是一个想法，但它可能是因为你将活动类添加到实际列表中，而不是列表中的列表对象？您从.nav-list li中删除，但是如果您记录'$（this）'，则添加到.nav-list – Chikilah

您将看到您的事件引用了列表本身。你必须引用监听'$（'。nav-list li'）'或者更好地使用@minitech下面的 –

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

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

来源

2013-11-24 18:53:33 Ryan

感谢它对我的工作 – Nothing

试试这个，

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

    $('.nav-list li.active').removeClass('active'); 
    $(this).addClass('active'); 
});

在您的上下文$(this)将指向UL元素不是Li。因此你没有得到预期的结果。

来源

2013-11-24 18:53:11

所描述的事件委托来做到这一点......谢谢！ – Paul

@Paul总是乐于提供帮助。 –

可以使用兄弟姐妹和removeClass方法

$('.nav-link li').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
});

来源

2014-05-28 13:31:20

我知道这是近一年的时间了，但这种解决方案对我来说很有用！ – Michael

我用这个：

$('.nav-list li.active').removeClass('active'); 
$(this).parent().addClass('active');

由于活性类是<li>元素，什么是点击是<a>元素，第一行从所有<li>中删除.active，第二行（同样，$(this)代表<a>这是单击元素）将.active添加到直接父级，即<li>。

来源

2016-05-09 19:15:59

使用jquery添加/删除ul列表的活动类？

回答

相关问题