在 jQuery 中切换类
今天的文章将介绍 jQuery 中的 toggle 类。
在 jQuery 中切换类
jQuery 提供了一个内置的类 toggle 方法。此事件根据类的存在或状态参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。
语法：
.toggleClass( className )
.toggleClass( classNames )
toggle 方法将一个或多个类作为参数。如果匹配元素集中的元素已经具有第一个版本中的类，则将其删除。
如果一个元素没有类，它将被添加。例如，我们可以将 .toggleClass() 应用于简单的 <div>。
.toggleClass() 的第二个模型使用第二个参数来确定是否添加或消除类。如果此参数的值为 true，则添加该类；如果 false，则该类被淘汰。
如果没有超过 .toggleClass() 的参数，则在第一次调用 .toggleClass() 时切换元素的所有类。
让我们通过以下示例来理解它。
<p class="blue">Click on me to change color</p>
.blue {
color: blue;
}
.highlight {
background: yellow;
}
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
上面的例子定义了一个带有 blue 类的段落标签。一旦用户点击了段落，它将应用 .toggleClass("highlight") 到该段落。
在任何支持 jQuery 的浏览器中运行上述代码；它将在下面显示结果。
输出：
切换之前：
切换后：
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
