Ajouter et supprimer une classe sur click en utilisant jQuery?

S’il vous plaît voir ce violon .

J’essaie d’append et de supprimer une classe sur les éléments li sur lesquels l’utilisateur a cliqué. 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 la distance que j’ai parcourue (voir violon). Je ne suis pas sûr de savoir comment faire en sorte que le “about-link” commence par la classe actuelle, mais il est ensuite supprimé lorsque l’utilisateur clique sur l’un des autres éléments li

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

Quels sont les inconvénients de l’utilisation d’un appel ajax synchrone?

Pourquoi ne pas essayer quelque chose comme ça?

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

JSFiddle

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

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

vous pouvez essayer ceci, il peut être utile de donner un code plus court pour les grandes fonctions.

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

Vous appliquez votre classe aux éléments , qui ne sont pas des frères et sœurs, car ils sont tous compris dans un élément

. Vous devez déplacer l’arbre vers le parent

et rechercher les éléments `dans les frères et soeurs de ce niveau.

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

Voir ce violon mis à jour

Tu peux le faire:-

 $('#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

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'); }); });

Voici un article avec une démonstration de travail en direct. Classe Animation In JQuery

Tu peux essayer ça,

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

vous pouvez également utiliser la méthode switchClass () – elle vous permet d’animer simultanément la transition entre l’ajout et la suppression de classes.

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

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