如何使用jQuery在单击时设置类名

Question

我的HTML中有这个列表：

<ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

我希望只有点击的<li>才能将类设置为“有效”。因此，当有人点击应该将类设置为活动的第二个<li>元素时，应该删除第一个元素。

如何使用jQuery做到这一点？

Answer 1

试试这个：

$('ul li').click(function(){
     $(this).addClass('active').siblings().removeClass('active')
})

Answer 2

从所选元素中删除该类并添加新的：

$('li').click(function(){
  $('li.active').removeClass('active');
  $(this).addClass('active');
});

Answer 3

$('ul').on('click','li',function(){
    $(this).addClass('active').siblings().removeClass('active');
});​

Try the demo here.

在此方法中，只有一个单击侦听器将添加到ul元素中。这对你的表现有好处。

我希望这能解决你的问题。如果您有任何疑问，请随时提出。感谢