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

Question

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

这很容易设置，但是当其他li元素被点击时，我希望"active"类从非活动的li中删除。

我已经在jsfiddle上演示了问题: http://jsfiddle.net/tGW3D/

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

- Albin N

Answer 1

这将从每个带有“active”类的li中删除活动类，然后将其添加到被点击的元素。

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

- Rosmarine Popcorn

---

它对于动态生成的li无法工作。需要帮助。 - pramodpxi

@ppmakeitcount 我更新了它，以涵盖类似的情况。 - Rosmarine Popcorn

Answer 2

您可以使用 siblings 和 removeClass 方法。

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

http://jsfiddle.net/Lb65e/

- Ram

Answer 3

首先删除所有 .active 的实例，然后再添加它：

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

- BenM

Answer 4

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

Check: http://jsfiddle.net/tGW3D/2/

- Alex

Answer 5

这样的东西？

http://jsfiddle.net/c7ZE4/

您可以使用兄弟函数。addClass 返回相同的jQuery对象 $(this)，因此您可以链接 siblings 方法，该方法返回除了 $(this) 之外的所有其他元素。

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

- Michael Koper

---

我现在明白我不是唯一一个遇到这个问题的人:D 无论如何，这可以成为一行代码。 - Michael Koper

Answer 6

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

如果你了解jQuery，你可以像下面这样链接它。

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

以上代码将为您解决问题。尝试此演示

- Techie

Answer 7

您可以使用以下代码：

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

- Redwan

---

除了您的代码片段之外，如果您能解释一下正在发生的事情，那就太好了。尽管对于大多数人来说这是不言自明的，但我相信有些人会很高兴包含一些解释。此外，请格式化您的答案，使其更易读（将其添加到代码块中，可能还要添加换行符）。 - Alex Berger

Answer 8

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

这段 jQuery 代码可能会有所帮助。 别忘了添加Jquery CDN。

- divyanshu shukla

Answer 9

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

- AKM

---

你可以通过提供你所做的解释来改善答案。 - Aleks G

Answer 10

你可以通过以下代码更改CSS类：

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

链接到 jsfiddle

- Salman Aziz

---

谢谢，但这个问题已经有4年的答案了。 :) - Albin N