jQuery “active” de la classe d'affectation

Tous, je suis en train d'accomplir est d'être en mesure d'avoir une liste non ordonnée de liens dans lequel on est cliqué, le parent de l'élément de liste est affecté à la classe "active". Une fois qu'un autre lien est cliqué à l'intérieur de cette liste, il a vérifié si "active" est assigné, le retirer de la liste élément, et l'ajouter à la plus récente cliqué sur les liens de parent de l'élément de liste.

Exemple:

Étape d'Un Utilisateur a cliqué sur le lien "je suis lier les deux"

<ul>
<li><a href="#">I am link one</a></li>
<li class="active"><a href="#">I am link two</a></li>
</ul>

Étape Deux - l'Utilisateur a maintenant en cliquant sur le lien "je suis un lien"

<ul>
<li class="active"><a href="#">I am link one</a></li>
<li><a href="#">I am link two</a></li>
</ul>

Assez simple, mais l'homme, je me tabasser.

InformationsquelleAutor | 2009-08-11
  1. 10

    Hypothèse: l'élément UL a la classe 'linksList'.

    $('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});
    • Cela permettra d'éliminer la classe active de tous les <li> elementts bien, et pas seulement ceux dans le <ul>. Est-ce que vous voulez?
    • Cam: si il a ajouté un ID de Classe à l'ul dans son exemple, cela aurait pu être facilement résolu.
    • Modifié la réponse à la correspondance de la suggestion dans mon commentaire précédent.
    • +1 - beaucoup mieux 🙂
    InformationsquelleAutor Lior Cohen
  2. 7

    Quelque chose comme ce qui suit devrait le faire

    $(function() {
    $('li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');
    });
});

    Travail De Démonstration

    • +1 pour une solution plus complète que celle que j'ai posté.
    InformationsquelleAutor Russ Cam
  3. 1

    Cette question est un peu vieux maintenant, mais je pense qu'il y a toujours de la place pour l'amélioration.

    "Traditionnel" locales de liaison d'événement:

    $("ul a").click(function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action (e.g. follow the link):
    return false;
});

    Maintenant, le même événement à l'aide de délégation via delegate() (jQuery +1.4.2). Vous permet d'ajouter dynamiquement des extra - >li>un sans avoir à relier l'événement:

    $("ul").delegate("a", "click", function(){
    $(this).parent("li").addClass("active")
        .siblings().removeClass("active");

    # return false to cancel the default action
    # and prevent it from bubbling (further) up:
    return false;
});

    Changement "ul" pour tout ce qui correspond exclusivement à la liste désirée(s), par exemple ".linksList", "#nav", etc.

    InformationsquelleAutor Pablo Ziliani