如何使用 jQuery 的 `addClass()` 和 `removeClass()` 一次仅突出显示一个列表项？

使用 jQuery 在单击时添加和删除类

使用列表菜单项时，通常需要通过以下方式突出显示当前活动的项目添加一个类。但是，您可能会遇到确保一次只有一项具有该类的挑战。

要解决此问题，请使用 jQuery 的 addClass() 和 removeClass() 方法。首先，将类添加到所需的起始元素，例如“about-link”。然后，在列表项（“menu li”）上使用事件侦听器来处理点击。

在事件侦听器内，利用siblings() 方法从所有其他列表项元素中删除该类。这可确保只有单击的元素保留该类。但是，要从“about-link”活动开始，我们需要添加一行额外的代码：

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

在此修改后的代码中，我们选择列表项中的“a”元素（'菜单 li a') 以确保我们定位到链接。然后，我们使用当前类作为选择器，将其从任何先前活动的链接中删除，然后再将其添加到单击的链接中。这消除了在初始 JavaScript 中手动将类添加到“about-link”的需要。

以上是如何使用 jQuery 的 `addClass()` 和 `removeClass()` 一次仅突出显示一个列表项？的详细内容。更多信息请关注PHP中文网其他相关文章！