如何使用 jQuery 动态切换菜单项上的单个活动类？

使用 jQuery 动态切换菜单项上的类

在这篇文章中，我们遇到了一个场景，我们寻求在以下情况下动态添加和删除类：单击特定的菜单项。目标是一次维护一个活动类，模仿典型的菜单导航行为。

为了实现这一点，我们最初将“当前”类添加到“关于链接”以指定其初始活动状态。随后，我们将一个事件监听器附加到

上。菜单中的元素。当任何

单击后，它获得“当前”类，而其兄弟姐妹则删除该类，以确保排他性。

但是，为了从一开始就适当地反映活动状态，我们可以改进我们的方法。我们可以利用修改后的事件处理程序，首先从当前拥有它的菜单中任何现有的“a”元素中删除“当前”类，而不是直接将“当前”类添加到“about-link”中。然后，我们将“当前”类添加到单击的 元素。此调整保证“about-link”在没有“current”类的情况下启动，并在整个菜单交互过程中保持所需的单一活动状态。

以下是经过此改进的增强型 jQuery 代码：

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

这种方法确保菜单以默认状态下的“about-link”开始，并在单击其他菜单项时动态切换活动类，遵循所需的功能。

以上是如何使用 jQuery 动态切换菜单项上的单个活动类？的详细内容。更多信息请关注PHP中文网其他相关文章！