jquery - jQueryを使用してクリック時にクラスを追加および削除しますか?

Question

このフィドルを見てください。

クリックされた li 要素のクラスを追加および削除しようとしています。これはメニューであり、各liアイテムをクリックするとクラスが取得され、他のすべてのliアイテムはクラスが削除されます。そのため、一度にクラスを持つ li アイテムは 1 つだけです。これが私が得た距離です（フィドルを参照）。「about-link」を現在のクラスで開始する方法がわかりませんが、他のli項目の1つをクリックすると削除されますか?

$('#about-link').addClass('current');
$('#menu li').on('click', function() {
    $(this).addClass('current').siblings().removeClass('current');
});

Answer 1

他の li 要素は a 要素の兄弟ではありません。

$('#menu li a').on('click', function(){
    $(this).addClass('current').parent().siblings().children().removeClass('current');
}); 

Answer 2

クラスを<a>要素に適用していますが、要素はそれぞれ要素に囲まれているため、兄弟ではありません<li>。ツリーを親に移動し、<li>そのレベルの兄弟で ` 要素を見つける必要があります。

$('#menu li a').on('click', function(){
$(this).addClass('current').parent().siblings().find('a').removeClass('current');
});

この更新されたフィドルを参照してください

Answer 3

サイトの Head セクションでこれを試してください。

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

Answer 4

var selector = '.classname';
$(selector).on('click', function(){
    $(selector).removeClass('classname');
    $(this).addClass('classname');
});