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

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

HTML

 
Test
 
Page 1
 
Page 2
 
Page 3
  

jQuery的：

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

Answer 1

this将指向.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 。 因此，您没有得到预期的结果。

Answer 4

我用过这个：

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

由于活动类位于

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

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

。