2012-03-13 12 views
9

aquí es html:jQuery Agregar clase para li actual y eliminar li anterior cuando se haga clic en el interior li a

<ul>  
    <li class="current"><a href="#">menu item</a></li> 
    <li><a href="#aba">menu item</a></li> 
    <li><a href="#abb">menu item</a></li> 
    <li><a href="#abc">menu item</a></li> 
    <li><a href="#abd">menu item</a></li> 
</ul> 

si presiono 'a' acoplamiento que le addClass 'actual' a li hecho clic y quitar li class de edad ? este es mi intento:

$('ul li a').click(function(){ 
    $('ul li').removeClass('current'); 
    ... don't know here (add class to current li) ... 
}); 
+0

jQuery tiene un gran documentación que es digno de una lectura: http://api.jquery.com/category/traversing/ –

+0

NVM lo consiguió gracias Rob – test

Respuesta

29

Uso .parent('li') o .closest('li') para seleccionar el <li> se hace clic.

$('ul li a').click(function() { 
    $('ul li.current').removeClass('current'); 
    $(this).closest('li').addClass('current'); 
}); 
+0

gracias funcionó bien – test

0

Sólo tiene que añadir la clase a la this así ...

$(this).addClass('yourClass'); 
+1

'this' es el elemento ''. –

6

Uso en ('clic') si está utilizando la última versión de jQuery

$('ul li a').on('click', function(){ 
    $(this).parent().addClass('current').siblings().removeClass('current'); 
}); 

un violín es here.

2

Rob es correcto pero $('ul li.current').removeClass('current'); no funcionó para mí. El siguiente código funciona.

jQuery('ul li a').click(function() 
{ 

jQuery('ul').children().removeClass('selected'); 
jQuery(this).closest('li').addClass('selected'); 

}