jQuery CSS 类

CSS 类（class）是给元素"贴标签"的好办法：同一套样式可以复用在很多元素上。jQuery 提供 addClass()、removeClass()、toggleClass() 三个方法动态增删类名，从而在不改 HTML 的情况下切换样式。

先准备一段 CSS 和按钮：

<style>
    .important { font-weight: bold; color: red; }
    .box { border: 1px solid #ccc; padding: 10px; }
</style>
<p id="note" class="box">这是提示文字</p>
<button id="btn">切换强调</button>

addClass() 添加类

addClass() 给选中元素追加一个或多个类，原有类保持不变：

$("#note").addClass("important");
// 效果：#note 同时拥有 box 和 important 两个类，文字变红加粗

可以一次添加多个类，用空格分隔：

$("#note").addClass("important another-class");
// 效果：一次追加两个新类

removeClass() 移除类

removeClass() 删除指定的类；不带参数则删除全部类：

$("#note").removeClass("important");
// 效果：只去掉 important，box 样式（边框）仍在

$("#note").removeClass();
// 效果：全部类被清除，回到无样式状态

toggleClass() 切换类

toggleClass() 是"有就删、没有就加"的开关：元素没有该类则添加，有则移除：

$("#btn").click(function () {
    $("#note").toggleClass("important");
});
// 效果：每次点击按钮，文字在"加粗红色"与"普通"之间来回切换

toggleClass() 也支持传入多个类名、或第二个布尔参数强制添加(true)/移除(false)。

三种方法的适用场景

方法	行为	典型用途
addClass()	只增不减	打开高亮、标记选中
removeClass()	只减不增	关闭高亮、取消选中
toggleClass()	有删无增	明暗主题、展开收起

综合示例：点击高亮当前项

<ul id="menu">
    <li>首页</li>
    <li>教程</li>
    <li>关于</li>
</ul>

$("#menu li").click(function () {
    $("#menu li").removeClass("active"); // 先清掉所有高亮
    $(this).addClass("active");          // 再给点击项加上
});
// 效果：无论点哪个菜单项，只有它保持高亮（配合 CSS 中 .active 的样式）

小结

CSS 类三方法分工明确：addClass() 添加、removeClass() 删除、toggleClass() 开关切换。结合"先清后加"的技巧即可实现菜单高亮、主题切换等常见交互。