web-dev-qa-db-ja.com

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

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

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

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

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

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

JSFiddle

60
Jamie Taylor

あなたはこれを一緒に試すことができます、それは大きな機能でより短いコードを与えるのに役立つかもしれません。

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

6
Stanley Amos

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

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

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

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

こちらをご覧ください 更新されたフィドル

3
user1864610

あなたはこれを行うことができます：-

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

デモ： Fiddle

3
palaѕн

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

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

ライブデモのある記事JQueryのクラスアニメーション

これを試すことができます、

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

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

$(function () {
        $("#btnSubmit").click(function () {
            $("#btnClass").switchClass("btn", "btnReset", 1000, "easeInOutQuad");
        });
    });
2
Bharath Kumaar
var selector = '.classname';
$(selector).on('click', function(){
    $(selector).removeClass('classname');
    $(this).addClass('classname');
});
0
Rajesh Doot