如何使用 jQuery 在单击时添加和删除 CSS 类？-css教程-PHP中文网

如何使用 jQuery 在单击时添加和删除 CSS 类？

Linda Hamilton

发布： 2024-11-26 03:47:11

原创

358 人浏览过

How to Use jQuery to Add and Remove CSS Classes on Click?

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

在 jQuery 中，您可以使用 addClass( 动态操作元素上的 CSS 类) )、removeClass() 和toggleClass() 方法。这对于实现动态行为非常有用，例如添加或删除活动状态或突出显示菜单项。

示例：在单击时添加和删除类

假设您有一个带有

的菜单元素。您想要将“当前”类添加到单击的元素，同时将其从所有其他元素中删除。这确保一次只有一个元素具有“当前”类。

这是一个 jQuery 解决方案：

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

登录后复制

此代码使用事件委托将单击处理程序附加到所有

李>容器内 ID 为“menu”的元素。单击某个元素时，它会将“当前”类添加到自身，并使用siblings() 方法从其所有同级中删除相同的类。

其他注意事项：初始化“当前”类

$('#about-link').addClass('current');

登录后复制

最初，您需要在其中一个菜单项上设置“当前”类。您可以使用以下方法执行此操作：

这会将“当前”类添加到 ID 为“about-link”的元素，确保它作为活动项目开始。

改进的解决方案

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

登录后复制

这是一个改进的解决方案，简化了代码：

这与之前的代码类似，但目标是

以上是如何使用 jQuery 在单击时添加和删除 CSS 类？的详细内容。更多信息请关注PHP中文网其他相关文章！