本教程详细介绍了如何使用jQuery和CSS来动态改变一组具有相同类名的元素的样式，以实现选中状态的视觉反馈。文章提供了两种实现方案：一是利用CSS的`:focus`伪类，二是推荐使用jQuery结合CSS类进行切换，通过移除旧的选中类并添加新的选中类，从而高效管理元素的选中与非选中状态，确保用户界面响应灵敏且易于维护。

在现代网页开发中，经常需要对一组相似的元素（例如卡片轮播图中的项目、导航菜单项或列表中的条目）进行交互式样式控制。当用户选择其中一个元素时，该元素应显示为“选中”状态（例如改变颜色），而其他未被选中的元素则恢复到默认样式。本文将深入探讨如何利用jQuery和CSS有效实现这一功能，重点介绍通过动态切换CSS类的方法。

挑战与常见误区

初学者在尝试实现此类功能时，常遇到的挑战是如何在多个元素之间精确管理选中状态。直接为每个元素分配唯一的id并在点击时进行样式修改，虽然可行，但当元素数量增多时，维护成本会急剧上升。此外，简单地在点击时添加样式，而忘记移除其他元素的样式，会导致多个元素同时处于“选中”状态，不符合预期。

方案一：利用CSS :focus 伪类

对于某些特定场景，特别是当元素是可交互的（如链接、按钮

CSS 示例：

/* 默认样式 */
a {
  display: block;
  font-weight: bold;
  color: green; /* 默认颜色 */
  margin-bottom: 10px;
  text-decoration: none;
}

/* 当元素获得焦点时的样式 */
.focusme:focus {
  color: blue; /* 获得焦点时变为蓝色 */
}

HTML 示例：

焦点伪类示例 1
焦点伪类示例 2

优点： 纯CSS实现，代码简洁。 缺点： 仅适用于可获得焦点的元素；“选中”状态与焦点绑定，可能不完全符合所有交互逻辑（例如，点击后失去焦点样式就消失）。对于更复杂的“选中”状态管理，通常需要更灵活的JavaScript控制。

方案二：通过 jQuery 动态切换 CSS 类（推荐）

这是最常用且灵活的方案，通过jQuery在点击事件中动态添加或移除一个特定的CSS类来控制元素的选中状态。

1. 定义 CSS 样式

首先，我们需要定义元素的默认样式以及“选中”状态下的样式。

CSS 示例：

/* 默认样式 */
a {
  display: block;
  font-weight: bold;
  color: green; /* 默认颜色 */
  margin-bottom: 10px;
  text-decoration: none;
}

/* 选中状态的样式 */
a.clicked {
  color: red; /* 被点击（选中）时变为红色 */
}

这里，我们定义了一个名为 clicked 的类，当一个元素同时拥有 clicked 类时，其文本颜色将变为红色。

2. 实现 jQuery 逻辑

jQuery代码的核心思想是：当一个元素被点击时，首先移除所有兄弟元素（或同组元素）上的 clicked 类，然后将 clicked 类添加到当前被点击的元素上。

jQuery 示例：

jQuery(function($) {
  // 当页面DOM加载完毕后执行

  // 监听所有具有 'addclass' 类的元素的点击事件
  $('.addclass').on('click', function(e) {
    e.preventDefault(); // 阻止a标签的默认跳转行为

    // 1. 移除所有同组元素上可能存在的 'clicked' 类
    // 查找所有具有 'addclass' 和 'clicked' 类的元素，并移除 'clicked' 类
    $('.addclass.clicked').removeClass("clicked");

    // 2. 将 'clicked' 类添加到当前被点击的元素上
    // `$(this)` 指代当前被点击的元素
    $(this).addClass("clicked");
  });
});

代码解释：

jQuery(function($) { ... });：这是jQuery的简写形式，确保在DOM完全加载后再执行代码。
$('.addclass').on('click', function(e) { ... });：为所有带有 addclass 类的元素绑定点击事件监听器。e.preventDefault(); 用于阻止标签的默认跳转行为，这在点击链接仅为切换样式时非常有用。
$('.addclass.clicked').removeClass("clicked");：这一行是实现“单选”效果的关键。它首先选取所有同时具有 addclass 和 clicked 类的元素（即所有当前被标记为“选中”的同组元素），然后将它们的 clicked 类移除，从而取消它们的选中状态。
$(this).addClass("clicked");：$(this) 在事件处理函数中指向当前被点击的DOM元素。这一行将 clicked 类添加到当前被点击的元素上，使其变为选中状态。

3. HTML 结构

为了让jQuery代码能够正确识别和操作，需要确保你的HTML元素具有相应的类名。

HTML 示例：


切换类示例 1
切换类示例 2
切换类示例 3

将上述CSS、jQuery和HTML代码组合在一起，即可实现点击元素时动态切换其样式，并确保只有一个元素处于选中状态的效果。

完整示例

以下是一个将所有部分整合在一起的完整示例：

HTML (包含JS和CSS引用):

动态切换元素样式

动态切换元素选中状态

方案一：使用 :focus 伪类 (适用于可聚焦元素)

焦点伪类示例 1 焦点伪类示例 2

点击上方链接并保持焦点，颜色会改变。

方案二：使用 jQuery 动态切换 CSS 类 (推荐)

切换类示例 A 切换类示例 B 切换类示例 C

点击上方链接，被点击的会变红，其他恢复绿色。

注意事项与最佳实践

语义化HTML： 尽量使用语义化的HTML标签，例如列表项使用
，导航链接使用。
CSS类命名： 使用清晰、描述性的CSS类名，例如 is-selected, active, current 等，而不是 clicked 或 addclass。
事件委托： 如果你的元素是动态添加的（例如通过AJAX加载），或者元素数量非常多，考虑使用事件委托 ($(document).on('click', '.addclass', function() { ... });) 来提高性能和代码的健壮性。
无障碍性（Accessibility）： 对于真正的“选中”状态，考虑添加ARIA属性，如 aria-selected="true"，以便屏幕阅读器等辅助技术能够正确传达信息。
性能： 对于非常大的列表，removeClass 和 addClass 操作通常是高效的。但如果需要频繁操作成千上万个元素，可能需要进一步优化DOM操作。
框架集成： 如果你在使用WordPress等CMS，确保jQuery代码在 jQuery(function($){ ... }); 或 (function($){ ... })(jQuery); 这样的包装器中，以避免与其他JavaScript库的$符号冲突。

总结

通过本教程，我们学习了如何利用jQuery和CSS动态管理一组元素的选中状态。虽然CSS的:focus伪类提供了一种简洁的解决方案，但对于大多数复杂的交互场景，使用jQuery动态切换CSS类是更灵活和推荐的方法。这种方法不仅能精确控制元素的样式，还能确保用户界面的一致性和响应性，是构建交互式网页应用的基石。