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

jQuery: Remove class if other element is clicked

提问by Albin N

I have an ul-list that contains li-elements. When the user clicks on one of these li elements a class should be added to that element.

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

This is easy to setup, however, when the other li-element is clicked I want the "active"-class to be removed from the non-active li.

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

I have made a jsfiddle of the problem: http://jsfiddle.net/tGW3D/

我对这个问题做了一个 jsfiddle：http: //jsfiddle.net/tGW3D/

There should be one li-element that is red at any one time. If you click the second and then the first, only the first should be red.

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

回答by Burimi

This will remove the active class from each li that have active and than will add to the Element which was clicked.

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

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

回答by undefined

You can use siblingsand removeClassmethods.

您可以使用siblings和removeClass方法。

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

http://jsfiddle.net/Lb65e/

http://jsfiddle.net/Lb65e/

回答by BenM

Just remove all instances of .activefirst, and then add it:

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

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

回答by Alex

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

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

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

回答by Michael Koper

Something like this?

像这样的东西？

http://jsfiddle.net/c7ZE4/

http://jsfiddle.net/c7ZE4/

You can use the siblings function. addClassreturns the same jquery object $(this) so you can chain the siblingsmethod which returns all the other elements except $(this).

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

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

回答by Techie

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

If you know jquery you can chain it like below.

如果你知道 jquery，你可以像下面那样链接它。

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

Above code will do the trick for you. Try this demo

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

回答by AKM

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

回答by divyanshu shukla

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

This jquery code might help. Don't forget to add Jquery CDN.

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

回答by Salman Aziz

You change css class by this code:

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

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

Link to jsfiddle

链接到jsfiddle