jQuery affectation de classe « active »

Question

Tout ce que je suis en train d'accomplir est d'être en mesure d'avoir une liste non ordonnée des liens où l'on est cliqué, l'élément de liste parent est attribué la classe « active ». Une fois un lien est cliqué dans cette liste, il vérifie pour voir si « actif » est attribué, retirez-le de cet élément de liste, et l'ajouter à la plus récente liens cliqués élément de la liste des parents.

Exemple:

Première étape - l'utilisateur a cliqué sur le lien « Je suis deux lien »

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

Deuxième étape - l'utilisateur a cliqué 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 que je me battre.

Answer 1

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

$('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});

Answer 2

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 Démo

Answer 3

Cette question est un peu vieux, mais je pense qu'il ya encore de la place pour l'amélioration.

événement local "traditionnel" obligatoire:

$("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, la même délégation d'événement à l'aide par l'intermédiaire de délégué () (jQuery +1.4.2). vous permet d'ajouter dynamiquement une supplémentaire> li> sans avoir à rebind 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;
});

Modifier « ul » à tout ce qui correspond exclusivement la liste souhaitée (s), par exemple ".LinksList", "#nav", etc.