Hinzufügen und Entfernen einer Klasse beim Klicken mit jQuery?

Question

Bitte sehen Sie diese fiddle.

Ich versuche, eine Klasse für li-Elemente hinzuzufügen und zu entfernen, die angeklickt werden. Es ist ein Menü und wenn man auf jeden li-Eintrag klickt, möchte ich, dass er den Kurs gewinnt, und alle anderen li-Einträge haben die Klasse entfernt. Also hat nur ein li-Item die Klasse gleichzeitig. So weit habe ich (siehe Geige). Ich bin mir nicht sicher, wie man den 'About-Link' mit der Klassen-Current startet, aber dann wird es entfernt, wenn auf einen der anderen Li-Items geklickt wird?

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

Answer 1

Warum nicht so etwas versuchen?

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

JSFiddle

Answer 2

Die anderen Elemente sind nicht li Geschwister des einen Elements.

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

Answer 3

Sie sich bewerben Ihre Klasse auf die <a> Elemente, die nicht Geschwister sind, weil sie jeweils eingeschlossen in einem <li> Element sind. Sie müssen den Baum nach oben zum übergeordneten <li> verschieben und die `Elemente in den Geschwistern auf dieser Ebene finden.

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

Sehen Sie diese updated fiddle

Answer 4

Sie können dies tun: -

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

Demo: Fiddle

Answer 5

können Sie diese zusammen versuchen, kann es helfen, einen kürzeren Code zu groß geben Funktion.

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

Answer 6

Versuchen Sie dies in Ihrem Kopf-Bereich der Seite:

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

Answer 7

Hier ist ein Artikel mit Live-Arbeits DemoClass Animation In JQuery

du versuchen können,

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

Sie können auch die Methode switchClass() verwenden, mit der Sie den Übergang des Hinzufügens und Entfernens von Klassen gleichzeitig animieren können.

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