Ajouter et supprimer une classe sur le clic en utilisant jQuery?

Question

Ajouter et supprimer une classe sur le clic en utilisant jQuery?

, Veuillez consulter cette violon.

J'essaie d'ajouter et de supprimer une classe sur les éléments li qui sont cliqués. C'est un menu et quand on clique sur chaque élément li, je veux qu'il gagne la classe et tous les autres éléments li ont la classe supprimée. Donc, un seul élément li a la classe à la fois. C'est jusqu'où j'ai obtenu (voir violon). Je ne suis pas sûr de savoir comment faire démarrer le 'about-link' avec la classe current, mais ensuite il est supprimé lorsque l'un des autres éléments li est cliqué sur?

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

22

class click css html jquery

demandé sur Re Captcha 2013-10-22 18:18:18

8 réponses

score 50 · Answer 1

Pourquoi ne pas essayer quelque chose comme ça?

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

JSFiddle

score 5 · Answer 2

Les autres éléments li ne sont pas frères et sœurs de l'élément a.

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

score 4 · Answer 3

Vous pouvez essayer ceci, cela peut aider à donner un code plus court sur une grande fonction.

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

score 3 · Answer 4

Vous appliquez votre classe aux éléments <a>, qui ne sont pas frères et sœurs car ils sont chacun enfermés dans un élément <li>. Vous devez remonter l'arbre vers le parent <li> et trouver les ' éléments dans les frères et sœurs à ce niveau.

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

Voir ceci mis à jour fiddle

score 3 · Answer 5

Vous pouvez faire ceci: -

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

Démo: Violon

score 2 · Answer 6

Essayez ceci dans votre Section Head du site:

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

score 1 · Answer 7

Voici un article avec une démo de travail en direct Animation de classe dans JQuery

Vous pouvez essayer ceci,

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

Vous pouvez également utiliser la méthode switchClass () - elle vous permet d'animer la transition d'ajout et de suppression de classes en même temps.

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

score 0 · Answer 8

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

Las etiquetas más populares

Ajouter et supprimer une classe sur le clic en utilisant jQuery?

8 réponses