jQuery: добавление класса к элементу li после щелчка по ссылке и отмена выбора всех других классов

Question

Я создаю меню с такими тегами:

<div class="animatedtabs">
  <ul>
    {% for item in menu_items %}
    <li><a href="{{ item.url }}" title="{{ item.name }}"><span>{{ item.name }}</span></a></li>
    {% endfor %}
  </ul>
</div>

Что я хочу сделать, я хочу добавить class = "selected" в li после щелчка по ссылке и удалить все остальные class = "selected" в других li ...

Также мне интересно, как показать меню таким образом, чтобы первый элемент был выбран по умолчанию ... Но потом, когда нажимается другая ссылка, переключается class = "selected"

Answer 1

    $(function() {


    $('.animatedtabs ul a').click(function() {

         $('.animatedtabs ul a').removeClass('selected');
         $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

это сделает все, что вы просили, реальным! ; -)

Answer 2

Есть вопрос по меню навигации в Django: Навигация в Джанго

Этот ответ является хорошим примером использования тега шаблона для добавления классов к элементам li. Навигация в Джанго

Answer 3

Как это:

$('.animatedtabs li a').click(function() {
    $('.animatedtabs li').removeClass('selected');
    $(this).closest('li').addClass('selected');
    //Do something
    return false;
});

Answer 4

Я бы сказал, что еще более элегантный метод выглядит следующим образом:

$(function() {

    // Make the first list item selected
    $('.animatedtabs li:first').addClass('selected');

    // The first item is automatically deselected when another is clicked
    $('.animatedtabs li').click() {

        // Make the current li selected
        $(this).addClass('selected');

        // Remove the selected class from any currently selected sibling items
        $(this).siblings('.selected').removeClass('selected');

        return false;
    }

});

Я использовал этот метод, когда недавно создавал прямую копию окна поиска Mac OS, используя только jQuery HTML и CSS для проекта, над которым я работаю, и он работает волшебным образом.

Answer 5

Просто удалите «selected» из строки класса all <li> элементов, а затем добавьте его к элементу, по которому щелкнули.

$('li.foo').click(function(li) {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});