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

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

4 个解决方案

#1

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

这将指向.nav-list选择的

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

#2

you can use siblings and removeClass method

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

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

#3

Try this,

试试这个,

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

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

In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.

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

#4

I used this:

我用这个:

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

Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.

由于活动类位于

元素中，被单击的是元素，第一行从所有

元素中,被单击的是元素,第一行从所有

中删除.active，第二行(同样，$(this)表示，即单击的元素)将.active添加到直接父元素中，即

中删除.active,第二行(同样,美元(这)表示,即单击的元素)将.active添加到直接父元素中,即

。

#1