jQuery "активное" назначение класса

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;
});

Теперь то же самое, используя делегирование событий через делегат () (jQuery +1.4.2). Позволяет динамически добавлять дополнительные> 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" и т. д.