jquery - jQueryを使用してクリック時にクラス名を設定する方法

Question

HTML に次のリストがあります。

<ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ここでは、クリックされたものだけが<li>「アクティブ」に設定されたクラスを持つ必要があります。したがって、誰かが<li>クラスをアクティブとして設定する必要がある2番目の要素をクリックすると、最初の要素を削除する必要があります。

jQueryを使用してこれを行うにはどうすればよいですか?

score 4 · Accepted Answer

これを試して：

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

score 2 · Accepted Answer

選択した要素からクラスを削除し、新しいものを追加します:

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

score 1 · Accepted Answer

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

このメソッドでは、1 つのクリックリスナーのみが ul 要素に追加されます。それはあなたのパフォーマンスに適しています。

これで問題が解決することを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。ありがとう

3 に答える 3