jQuery assegnazione di classe “attiva”

Question

Tutto quello che sto cercando di realizzare è quello di essere in grado di avere una lista non ordinata di link in cui si è cliccato, la voce di elenco genitore viene assegnata la classe "attiva". Una volta che un altro link viene cliccato all'interno di tale elenco, è controllato per vedere se "attivo" è assegnato, rimuovere da quel elemento della lista, e aggiungerlo al più recente Collegamento chiamate voce dell'elenco genitore.

Esempio:

Fase uno - l'utente ha cliccato il link "Sono collegamento due"

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

Fase due - l'utente ha ora fatto clic sul link "Io sono uno collegamento"

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

Abbastanza semplice, ma l'uomo mi ho picchiato.

Answer 1

Assunzione:. L'elemento UL ha la classe 'linksList'

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

Answer 2

qualcosa come il seguente dovrebbe farlo

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

lavoro Demo

Answer 3

Questa domanda è un po 'vecchio, ma penso che ci sia ancora spazio per il miglioramento.

"tradizionale" vincolante evento locale:

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

Ora, lo stesso utilizzando la delega evento tramite delegato () (jQuery +1.4.2). Consente di aggiungere in modo dinamico in più> li> un senza dover associare nuovamente l'evento:

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

Cambia "ul" per tutto ciò che corrisponde esclusivamente la lista desiderata (s), per esempio ".LinksList", "#nav", ecc.