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

Question

こちらをご覧ください。fiddle

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

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

Answer 1

なぜこのようなことを試してみませんか？

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

JSFiddle

Answer 2

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

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

Answer 3

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

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

が、これはupdated fiddle

Answer 4

あなたはこれを行うことができます参照してください -

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

デモ：Fiddle

Answer 5

あなたはそれが大に短いコードを与えるために役立つかもしれない、に沿ってこれを試すことができます関数。

$('#menu li a').on('click', function(){ $('li a.current').toggleClass('current'); });

Answer 6

サイトのあなたの頭の部でこれを試してみてください：ここで

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

Answer 7

は、あなたがこれを試すことができ、ライブワーキングデモClass Animation In JQuery

と品です

$(function() { 
    $("#btnSubmit").click(function() { 
    $("#btnClass").removeClass("btnDiv").addClass("btn"); 
    }); 
}); 

では、switchClass（）メソッドを使用することもできます。これにより、クラスの追加と削除の遷移を同時にアニメーション化できます。

$(function() { 
     $("#btnSubmit").click(function() { 
      $("#btnClass").switchClass("btn", "btnReset", 1000, "easeInOutQuad"); 
     }); 
    });