jQuery：单击链接后向li元素添加类，并取消选择所有其他类答案

【问题标题】：jQuery: Adding class to the li element after the link is clicked, and deselecting all other classesjQuery：单击链接后向li元素添加类，并取消选择所有其他类
【发布时间】：2011-01-26 23:24:19
【问题描述】：

我正在生成带有此类标签的菜单：

<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，并删除其他 li 上的所有其他 class="selected"...

我也想知道，如何以这种方式显示菜单，所以默认选择第一项...但是当点击另一个链接时，会切换 class="selected"

【问题讨论】：

点击链接后，会加载一个新页面，破坏前一页面中Javascript所做的一切。
那么，这样做的唯一方法是在后端生成所需的类？
SLaks 是对的，该锚标记的 href 属性显然被设置为某个真实的 URL，因此一旦单击它，它将带您到该项目的 URL。您可能想在服务器端做一些事情来将当前页面的 li 的类设置为选中。

标签： jquery django

【解决方案1】：

    $(function() {


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

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

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

这使您所要求的一切变得真实！ ;-)

【讨论】：

【解决方案2】：

在 Django 中有一个关于导航菜单的相关问题： Navigation in django

这个答案有一个很好的例子，使用模板标签将类添加到li 元素。 Navigation in django

【讨论】：

【解决方案3】：

像这样：

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

【讨论】：

【解决方案4】：

只需从所有<li>元素的类字符串中删除“selected”，然后将其添加到被点击的那个。

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

【讨论】：

【解决方案5】：

我想说一个更优雅的方法如下：

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

});

我在最近为我正在处理的项目使用 jQuery HTML 和 CSS 创建 Mac OS finder 窗口的直接副本时使用了这种方法，它在那里神奇地工作。

【讨论】：