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

Question

我有一个包含 li 元素的 ul 列表。当用户单击这些 li 元素之一时，应将一个类添加到该元素。

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

我已经解决了这个问题：http: //jsfiddle.net/tGW3D/

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

Answer 1

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

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

Answer 2

你可以使用siblings和removeClass方法。

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

http://jsfiddle.net/Lb65e/

Answer 3

只需删除 first 的所有实例.active，然后添加它：

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

Answer 4

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

检查：http: //jsfiddle.net/tGW3D/2/

Answer 5

像这样的东西？

http://jsfiddle.net/c7ZE4/

您可以使用兄弟姐妹功能。addClass返回相同的 jquery 对象 $(this)，因此您可以链接兄弟方法，该方法返回除 $(this) 之外的所有其他元素。

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

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

上面的代码将为您解决问题。试试这个演示

Answer 7

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

Answer 8

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

此 jquery 代码可能会有所帮助。不要忘记添加Jquery CDN。

Answer 9

您可以使用以下代码：

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

Answer 10

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

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

链接到jsfiddle