webentwicklung-frage-antwort-db.com.de

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

Bitte sehen Sie diese Geige .

Ich versuche, eine Klasse zu li-Elementen hinzuzufügen und zu entfernen, auf die geklickt wird. Es ist ein Menü, und wenn man auf jedes li-Element klickt, möchte ich, dass es die Klasse erhält, und bei allen anderen li-Elementen wird die Klasse entfernt. Daher hat immer nur ein Einzelposten die Klasse. So weit bin ich gekommen (siehe Geige). Ich bin nicht sicher, wie man den 'About-Link' mit der Klasse als aktuell beginnen soll, aber dann wird es entfernt, wenn eines der anderen Li-Elemente angeklickt wird. 

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

Warum versuchst du nicht so etwas?

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

JSFiddle

51
Jamie Taylor

Die anderen li-Elemente sind keine Geschwister des a-Elements.

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

sie können dies zusammen ausprobieren, es kann hilfreich sein, bei großen Funktionen einen kürzeren Code anzugeben.

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

5
Stanley Amos

Sie wenden Ihre Klasse auf die <a>-Elemente an, die keine Geschwister sind, da sie jeweils in einem <li>-Element eingeschlossen sind. Sie müssen den Baum zum übergeordneten <li> verschieben und die Elemente in den Geschwistern auf dieser Ebene suchen.

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

Siehe diese aktualisierte Geige

3
user1864610

Du kannst das:-

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

Demo: Fiddle

3
palaѕн

Versuchen Sie dies in Ihrem Head-Bereich der Website:

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

Hier ist ein Artikel mit live funktionierender DemoKlassenanimation in JQuery

Sie können dies versuchen,

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

sie können auch die switchClass () -Methode verwenden. Mit dieser Methode können Sie den Übergang zum Hinzufügen und Entfernen von Klassen gleichzeitig animieren.

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