web-dev-qa-db-fra.com

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

S'il vous plaît voir ce violon .

J'essaie d'ajouter 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 ma distance (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');
});
jqueryhtmlcssclassclick
23
angela

Pourquoi ne pas essayer quelque chose comme ça?

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

JSFiddle

51
Jamie Taylor

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

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

5
Stanley Amos

Vous appliquez votre classe aux éléments <a>, qui ne sont pas des frères et sœurs, car ils sont tous compris dans un élément <li>. Vous devez déplacer l'arborescence vers le <li> 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 ceci violon mis à jour

3
user1864610

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: Fiddle

3
palaѕн

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

Voici un article avec une démonstration de travail en directAnimation de classe dans 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");
        });
    });
1
Bharath Kumaar
var selector = '.classname';
$(selector).on('click', function(){
    $(selector).removeClass('classname');
    $(this).addClass('classname');
});
0
Rajesh Doot