Pergunta

Tudo o que eu estou tentando fazer é ser capaz de ter uma lista não ordenada de links em que um é clicado, o item da lista pai é atribuído a classe "ativo". Uma vez que um outro link é clicado dentro dessa lista, é verificado para ver se "ativo" é atribuído, removê-la desse item da lista, e adicioná-lo à mais recente item da lista pai links clicados.

Exemplo:

Primeiro Passo - O usuário clicou no link "Estou ligação dois"

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

Segundo Passo - Usuário já clicou no link "Estou link de uma"

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

simples bonita, mas o homem que eu me bater.

Foi útil?

Solução

Assunção:. O elemento UL tem a classe 'linksList'

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

Outras dicas

Algo como o seguinte deve fazê-lo

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

demonstração de trabalho

Esta questão é um pouco velho agora, mas eu acho que ainda há espaço para melhorias.

"tradicional" de ligação evento local:

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

Agora, o mesmo usando a delegação de evento via delegado () (jQuery +1.4.2). Permite que você dinamicamente adicionar extras> li> um sem ter que religar o 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;
});

Change "ul" a qualquer coisa que partidas exclusivamente a lista desejada (s), por exemplo ".LinksList", "#nav", etc.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top