17

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

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

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

一度に赤である 1 つの li 要素が存在する必要があります。2 番目をクリックしてから 1 番目をクリックすると、最初の 1 つだけが赤くなります。

4

10 に答える 10

52

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

$('body').on('click', 'li', function() {
      $('li.active').removeClass('active');
      $(this).addClass('active');
});
于 2012-10-02T08:46:36.253 に答える
22

siblingsとremoveClassメソッドを使用できます。

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

http://jsfiddle.net/Lb65e/

于 2012-10-02T08:46:53.087 に答える
5

最初のすべてのインスタンスを削除して.activeから、追加するだけです。

$('ul li').on('click', function() {  
    $('ul li.active').removeClass('active');
    $(this).addClass('active');    
});
于 2012-10-02T08:47:16.300 に答える
2 
$('li').click(function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

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

于 2012-10-02T08:47:27.083 に答える
2

このようなもの？

http://jsfiddle.net/c7ZE4/

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

 $('li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
 });
于 2012-10-02T08:48:05.413 に答える
1 
 $('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'); 
});

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

于 2012-10-02T08:50:31.130 に答える
-1

次のコードで css クラスを変更します。

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

jsfiddleへのリンク

于 2016-01-27T14:51:04.907 に答える