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

Posted 2023-04-13

【中文标题】jQuery：单击链接后向li元素添加类，并取消选择所有其他类

【英文标题】：jQuery: Adding class to the li element after the link is clicked, and deselecting all other classes

【发布时间】：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 的类设置为选中。

【参考方案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 窗口的直接副本时使用了这种方法，它在那里神奇地工作。