如何使用 jQuery 管理菜单项的活动状态？

使用 jQuery 更改菜单项的状态

在这篇文章中，我们将深入研究如何利用 jQuery 的功能来动态管理类菜单中列表项的样式。目标是在单击时将“当前”类添加到特定列表项，并同时将其从所有其他项中删除。

初始设置

启动功能，我们首先需要用

定义菜单项使用 标签的元素和链接。我们将向列表项链接之一添加“当前”类，以指示最初选定的项目：

<ul>

添加事件监听器

使用 jQuery ，我们将事件侦听器附加到每个列表项的链接来处理单击event:

$('#menu li a').on('click', function() {
  // Add 'current' class to this list item
  $(this).addClass('current');
  
  // Remove 'current' class from all other list items
  $('#menu li a.current').not(this).removeClass('current');
});

说明

在事件侦听器中，jQuery 代码片段执行以下任务：

1. 添加 '当前'类到单击的列表项的链接使用$(this).addClass('current').
2. 使用 $('#menu li a.current').not(this).removeClass 从所有其他列表项链接中删除 'current' 类（'当前的'）。此行选择具有“当前”类别的所有链接，并排除当前单击的链接。

结果

因此，当用户单击任何菜单项的链接将获得“当前”类样式，而“当前”类将从先前的活动项中删除。这可确保在任何给定时间只有一个列表项链接具有当前样式。

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