web-dev-qa-db-ja.com

jQuery：他の要素がクリックされた場合、クラスを削除します

Li要素を含むul-listがあります。ユーザーがこれらのli要素のいずれかをクリックすると、その要素にクラスが追加されます。

これは簡単に設定できますが、他のli要素をクリックすると、「アクティブな」クラスを非アクティブなliから削除することができます。

私は問題のjsfiddleを作成しました： http://jsfiddle.net/tGW3D/

常に赤であるli要素が1つあるはずです。 2番目のボタンをクリックしてから最初のボタンをクリックすると、最初のボタンだけが赤になります。

jqueryaddclasstoggleclass
17
Albin N

これにより、アクティブな各liからアクティブなクラスが削除され、クリックされた要素に追加されます。

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

siblingsおよびremoveClassメソッドを使用できます。

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

http://jsfiddle.net/Lb65e/

18
undefined

最初に.activeのすべてのインスタンスを削除してから追加します。

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

チェック： http://jsfiddle.net/tGW3D/2/

2
Alex

このようなもの？

http://jsfiddle.net/c7ZE4/

兄弟関数を使用できます。 addClass は同じjqueryオブジェクト$（this）を返すため、$ this）を除く他のすべての要素を返す---（siblings メソッドをチェーンできます。

 $('li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
 });
2
Michael Koper
 $('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'); 
});

上記のコードはあなたのためのトリックを行います。 このデモを試してください

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