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

Question

我正在尝试删除并在每次单击时为列表项设置活动类.它当前正在删除所选的活动类,但未设置它.知道我错过了什么吗？

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

Answer 1

this将指向<ul>所选的.nav-list.你可以改用代表团!

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

Answer 2

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

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

Answer 3

试试这个,

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

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

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