Назначение класса jQuery “active”

Question

Все, чего я пытаюсь достичь, - это иметь возможность иметь неупорядоченный список ссылок, по которым нажимается одна, элементу родительского списка присваивается класс "активный". Как только в этом списке была нажата другая ссылка, он проверил, назначена ли "активная", удалил ее из этого элемента списка и добавил в элемент родительского списка "Ссылки, по которым были нажаты самые последние ссылки".

Пример:

Шаг первый - Пользователь нажал на ссылку "Я - вторая ссылка".

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

Шаг второй - Теперь пользователь нажал на ссылку "Я - первая ссылка".

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

Довольно просто, но, черт возьми, я сам себя избил.

Answer 1

Предположение:элемент UL имеет класс 'linksList'.

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

Answer 2

Для этого должно быть сделано что-то вроде следующего

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

Рабочая демонстрация

Answer 3

Этот вопрос уже немного устарел, но я думаю, что еще есть место для улучшения.

Обязательное проведение "Традиционного" местного мероприятия:

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

Теперь то же самое с использованием делегирования событий через delegate() (jQuery +1.4.2).Позволяет динамически добавлять extra >li>a без необходимости повторной привязки события:

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

Измените "ul" на все, что соответствует исключительно нужному списку (спискам), например".linksList", "#nav" и т.д.