jQuery asignación de clase “activo”

Question

Todo lo que estoy tratando de lograr es ser capaz de tener una lista desordenada de enlaces en los que se hace clic en uno, el elemento de la lista de los padres se le asigna la clase "activa". Una vez que se hace clic en un eslabón más dentro de esa lista, se comprueba para ver si se le asigna "activa", y eliminar de ese elemento de la lista, y añadirlo a los vínculos ha hecho clic elemento de la lista más reciente de los padres.

Ejemplo:

Paso - El usuario ha hecho clic en el enlace "Estoy enlace de dos"

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

Paso dos - El usuario ha hecho clic en el enlace "Soy un enlace de"

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

Bastante simple, pero el hombre que me golpearon.

Answer 1

Supuesto:. El elemento UL tiene la clase 'linksList'

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

Answer 2

Algo parecido a lo siguiente debería hacerlo

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

Demostración de Trabajo

Answer 3

Esta pregunta es un poco viejo, pero creo que todavía hay espacio para la mejora.

"tradicional" evento local de unión:

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

Ahora, usando la misma delegación de eventos a través de delegado () (jQuery +1.4.2). Le permite añadir de forma dinámica adicional> li> una sin tener volver a enlazar el 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;
});

Cambiar "ul" a cualquier cosa que coincide exclusivamente la lista (s) deseada, por ejemplo, "#Nav" ".linksList", etc.