jQuery UI 实例 - 切换 Class（Toggle Class）

概述

在网页开发中，经常会用到切换 Class 功能，以改变网页元素的样式和行为。而 jQuery UI 的 Toggle Class 功能可以方便地实现此功能，这篇文档将会介绍如何使用 jQuery UI 的 Toggle Class。

使用方法

首先，需要导入 jQuery 和 jQuery UI 的库文件，可以在官方网站下载相应的文件，也可以使用 CDN 引入。

<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

然后，在需要使用 Toggle Class 功能的元素上添加相应的 class，并设置初始样式。例如，以下代码为一个按钮添加了 .btn 和 .active 两个 class，初始样式为蓝色背景和白色文字。

<button class="btn active">Click me</button>

接下来，需要编写 JavaScript 代码来实现 Toggle Class 功能。以下是一个例子：

$(document).ready(function() {
  $(".btn").click(function() {
    $(this).toggleClass("active");
  });
});

代码说明：

$(document).ready() 方法用于在页面加载完成后执行代码。
$(".btn") 选中所有 class 为 .btn 的元素。
click() 方法用于处理点击事件。
toggleClass("active") 方法会在元素上切换 .active class，若本来已经有这个 class，则移除，若没有则添加。

最后，设置 .active class 的样式。例如，以下代码设置 .active 对应的样式为红色背景和黄色文字。

.btn.active {
    background-color: red;
    color: yellow;
}

总结

通过使用 jQuery UI 的 Toggle Class 功能，可以轻松地在网页开发中实现切换 Class 的功能。只需要在元素上添加需要切换的 Class，写好对应的 JavaScript 代码和 CSS 样式即可。但需要注意的是，如果要处理多个元素，则需要使用 .each() 方法来循环遍历每个元素，并分别处理。

jQuery UI 实例 jQuery UI 实例 - 切换（Toggle）