jQuery：如果单击了其他元素，则删除类

我有一个包含li元素的ul列表。当用户单击其中一个li元素时，应该向该元素添加一个类

这很容易设置，但是，当单击其他li元素时，我希望从非活动li中删除“活动”类

我对这个问题做了一个简单的解释：

---

任何时候都应该有一个红色的li元素。如果单击第二个，然后单击第一个，则只有第一个应为红色。

这将从每个具有活动的li中删除活动类，然后将添加到已单击的元素中

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

---

您可以使用

同级

和

removeClass

方法

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

---

只需先删除

.active

的所有实例，然后添加它：

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

检查： 像这样的事

您可以使用同胞函数。返回相同的jquery对象$（this），因此可以链接返回除$（this）之外的所有其他元素的方法

如果您知道jquery，您可以像下面这样链接它

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

---

上面的代码将为您实现这个技巧

您可以通过以下代码更改css类：

$（'li'）。单击（函数（）{
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
});

链接到

$（函数（）{
$（'li'）。单击（函数（）{
$（“li.active”）.removeClass（“active”）；
$（this.addClass（'active'）；
});
});

这个jquery代码可能会有所帮助。

---

不要忘记添加。

您可以使用以下代码：

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

---

我现在明白了，我并不是唯一一个人在这一行：D无论如何，这可以是一行。谢谢，但这个问题已经回答了4年了您可以通过解释您所做的不适用于动态生成的li来改进答案。需要帮助。@ppmakeitcount我更新了它，以涵盖类似的情况。除了您的代码片段之外，如果您能解释发生了什么，那就太好了。尽管对大多数人来说，这是不言自明的，但我相信如果包括一些解释，有些人会很高兴。另外，请格式化您的答案，使其更具可读性（将其添加到代码块中，并可能添加换行符）

 $('li').click(function() {
      $(this).addClass('active'); // add the class to the element that's clicked.
      $(this).siblings().removeClass('active'); // remove the class from siblings. 
});

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

<script>
    $(function() {
        $('li').click(function() {
            $("li.active").removeClass("active");
                $(this).addClass('active');
            });
        });
</script>

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

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