.toggleClass() 学习笔记

简介

.toggleClass() 方法是 jQuery 的一个常用方法之一，它可以在指定的 HTML 元素上添加或移除指定的 CSS 类。

语法

javascriptCopy Code
$(selector).toggleClass(classname,function(index,oldclass),switch)

参数说明

• selector：必需，需要进行切换类的元素选择器。
• classname：必需，要切换的 CSS 类名。
• function(index,oldclass)：可选，用于返回设置 CSS 类名的回调函数。
• switch：可选，布尔值参数。如果为 true，则强制添加类，如果为 false，则强制删除类。

实例演示

HTML 代码

htmlCopy Code
<div class="box">点击我切换颜色</div>

JS 代码

javascriptCopy Code
$('.box').click(function() {
  $(this).toggleClass('red');
});

CSS 代码

cssCopy Code
.box {
  width: 100px;
  height: 100px;
  background: #ccc;
}

.red {
  background: red;
}

效果演示

您可以点击下面这个按钮来查看示例演示效果：

<button onclick="$('.box').toggleClass('red')">点击切换颜色</button>

总结

通过使用 .toggleClass() 方法，我们可以轻松地在 HTML 元素中添加或删除 CSS 类名，从而实现动态改变元素样式的效果。