changement de classe active pour un élément de liste

Je suis en train de changer le "actif" de la classe pour l'cliqué sur un élément de liste, mais il me manque quelque chose. Voici ce que mon code HTML et jquery ressembler à:

HTML

<ul class="additional-menu">
    <li class="active"><a href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>

jQuery

$("#link2").click(function(){

    if ($(this).find('#additional-menu li').hasClass('active')) {
        //console.log("Active class seen");
        $(this).find('#additional-menu li').removeClass('active');
        $(this).addClass('active');
    }
});

Aucune idée de ce que je suis absent? Je ne suis même pas détecter la classe active à ce point...

Vous exécutez le code dans le document.est-il prêt?
oui je suis
Je pense que vous devriez supprimer la classe="active" de l'élément li. Le reste de la première li sera toujours active. et puis utiliser jQuery pour définir la classe active sur l'événement click

OriginalL'auteur Paul | 2013-10-27

  1. 9

    Vous pourriez réduire votre code juste

    $('.additional-menu').on('click','li', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

    Démo à http://jsfiddle.net/DvHBp/

    Nice one! C'est une bonne approche, merci! 🙂

    OriginalL'auteur Gabriele Petrioli

  2. 1

    Il y a beaucoup de problèmes dans le code

    //from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){

    //additional-menu is not an id it is a class and it is not a descendant of the li element 
    if ($(this).find('#additional-menu li').hasClass('active')) {
        //console.log("Active class seen");
        $(this).find('#additional-menu li').removeClass('active');
        //if you are using a if statement then addClass should be outside the if block
        $(this).addClass('active');
    }
});

    essayer

    jQuery(function(){
    var $lis = $('.additional-menu > li').click(function(){
        $lis.removeClass('active');
        $(this).addClass('active')    
    });
})
    qui a travaillé...qu'ai-je fait de mal? Semble que le code est presque la même chose...
    Je vois maintenant...merci pour l'explication!
    Dans ce cas, le premier élément de la liste sera toujours active. Comme cela a été fait active avec style en ligne. Il est donc préférable de l'enlever de style en ligne et l'ajouter avec jquery.

    OriginalL'auteur Arun P Johny

  3. 1

    find() get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

    Vous devez utiliser

    $(this).parent().siblings('#additional-menu li')

    parce que dans votre structure html #link2 une balise n'a pas de descendant de #additional-menu li

    OriginalL'auteur Cristian Bitoi

  4. 1

    Vous pouvez faire quelque chose de très générique:

    <ul class="additional-menu">
    <li class="active"><a href="#l1"> Link1</a></li>
    <li><a href="#l2">Link2</a></li>
    <li><a href="#l3">Link3</a></li>
</ul>

    Et en utilisant ce code JavaScript:

    $(function(){
    $('.additional-menu > li').click(function(){
        $('.additional-menu > li').removeClass('active');
        $(this).addClass('active');
    });
});

    OriginalL'auteur Praveen Kumar Purushothaman

  5. 1

    D'essayer cette solution :

    HTML:

    <ul class="additional-menu">
    <li><a id="link1" href="link1"> Link1</a></li>
    <li><a href="javascript:void(0)" id="link2">Link2</a></li>
    <li><a href="javascript:void(0)" id="link3">Link3</a></li>
</ul>

    CSS:

    .active{
    background-color : red;
}

    jQuery:

    //on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

    Démo

    OriginalL'auteur Ashad Shanto