jQuery „aktiv“ Klassenzuordnung

Question

Alles, was ich zu tun versuche, ist in der Lage sein, eine ungeordnete Liste von Links zu haben, in das man angeklickt wird, wird das übergeordnete Listenelement der Klasse „aktiv.“ Zugewiesen Sobald ein anderer Link innerhalb dieser Liste geklickt wird, überprüft er, ob „aktiv“ zugeordnet ist, entfernen Sie sie aus der Liste Element, und fügen Sie ihn auf den neuesten klickten Links geordneten Listenelement.

Beispiel:

Schritt Eins - Benutzer hat den Link geklickt haben: "Ich bin Link zwei"

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

Zweiter Schritt - Benutzer angeklickt hat nun den Link „Ich bin Link ein“

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

Ganz einfach, aber Mann, den ich schlug mich.

Answer 1

Annahme:. Das UL-Element hat die Klasse 'linksList'

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

Answer 2

So etwas wie die folgenden soll es tun

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

Working Demo

Answer 3

Diese Frage ist ein bisschen alt geworden, aber ich denke, es gibt immer noch Raum für Verbesserungen.

"Traditionelle" lokales Ereignis Bindung:

$("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;
});

Nun, das gleiche mit Ereignisse Delegation über Delegaten () (jQuery +1.4.2). Hier können Sie dynamisch hinzufügen Extra> li> ein, ohne das Ereignis erneut zu binden mit:

$("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;
});

Change „ul“ auf alles, was ausschließlich die gewünschte Liste übereinstimmt (s), z.B. ".LinksList", "#nav", etc.