如何使用 jQuery 在单击时切换 CSS 类来管理活动菜单项？

使用 jQuery 在单击事件上切换 CSS 类

为了使用 jQuery 动态添加和删除单击事件上的 CSS 类，让我们探索以下内容

问题：菜单由列表项组成，需要特定的班级才能活跃。单击某个项目后，应仅将类添加到该项目，同时将其从所有其他项目中删除。最初，“about-link”默认应具有“current”类。

解决方案：

要解决此问题，我们可以使用以下 jQuery代码：

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

在此代码：

• $('#menu li a') 选择所有
• 内的元素ID 为“menu”的元素的后代元素。
• .on('click', function()) 为这些元素注册单击事件侦听器。
• 在事件处理程序内, .removeClass('current') 从当前活动元素中删除“当前”类。
• .addClass('current') 将“当前”类添加到单击的元素。

通过遵循此方法，“about-link”最初将使用 $('#about-link').addClass('current ');。当单击菜单中的任何其他项目时，“当前”类将从之前的活动项目中删除并添加到单击的项目中，确保只有一个项目始终保持活动状态。

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