jQuery atribuição de classe “ativo”
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.
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');
});
});
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.