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

Все, что я пытаюсь сделать, это иметь неупорядоченный список ссылок, в которых один из них щелкнут, элементу родительского списка назначается класс «активный». После того, как в этом списке щелкнули другую ссылку, она проверяет, назначено ли «активное», удаляет ее из этого элемента списка и добавляет ее в элемент родительского списка самых последних нажатых ссылок.

Пример:

Шаг первый. Пользователь щелкнул ссылку «Я вторая ссылка».

<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>

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


state jquery sticky
person Community    schedule 11.08.2009    source источник

Ответы (3)


arrow_upward
10
arrow_downward

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

$('.linksList li a').click(function()
{
  $('.linksList li').removeClass('active');
  $(this).parent().addClass('active');
});
person Lior Cohen    schedule 11.08.2009
comment
Это удалит активный класс из всех элементов ‹li›, а не только из соответствующих ‹ul›. Это то, что вы хотите? - person Russ Cam; 12.08.2009
comment
@Russ Cam: если бы он добавил идентификатор / класс к ul в своем примере, это можно было бы легко решить. - person Lior Cohen; 12.08.2009
comment
Изменил ответ, чтобы он соответствовал предложению в моем предыдущем комментарии. - person Lior Cohen; 12.08.2009

arrow_upward
7
arrow_downward

Что-то вроде следующего должно сделать это

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

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

person Russ Cam    schedule 11.08.2009
comment
+1 за более комплексное решение, чем то, которое я опубликовал. - person Lior Cohen; 12.08.2009

arrow_upward
1
arrow_downward

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

"Традиционная" локальная привязка событий:

$("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). Позволяет динамически добавлять дополнительные >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» и т. д.

person Pablo Ziliani    schedule 09.12.2010