jQuery：刪除類，如果其他元素被點擊

Question

我有一個包含li元素的ul列表。當用戶點擊其中一個li元素時，應該將一個類添加到該元素中。

然而，當點擊其他li元素時，這很容易設置，我希望將「活動」類從非活動li中移除。

我已經對這一問題進行一個的jsfiddle： http://jsfiddle.net/tGW3D/

應該有一個鋰元素是紅色的在任何一個時間。如果你點擊第二個，然後第一個，只有第一個應該是紅色。

Answer 1

這將刪除每個具有活動的活動類，並將添加到被單擊的元素。

$('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

只是刪除的.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），因此您可以鏈接siblings方法，該方法返回除$（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'); 
}); 

上面的代碼將爲你做的伎倆。 Try this demo

Answer 7

您可以通過這個代碼更改CSS類：

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

鏈接jsfiddle

Answer 8

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