如何用 JavaScript 实现单选式盒子颜色切换（点击高亮，其余复原）

本文详解如何使用原生 JavaScript 实现"单选高亮"效果：点击任一 .box 元素时，仅该元素变为指定颜色，其余同组元素自动恢复默认背景色。 本文详解如何使用原生 javascript 实现"单选高亮"效果：点击任一 `.box` 元素时，仅该元素变为指定颜色，其余同组元素自动恢复默认背景色。在构建交互式 UI 时，常需实现"单选状态高亮"------例如选项卡、颜色选择器或步骤导航。核心逻辑是：同一时刻仅一个元素处于激活态，其他必须同步重置。下面以四个具有相同类名 .box 的 <div> 为例，提供完整、可直接运行的解决方案。? 基础 HTML 结构<div class="box">Box1</div><div class="box">Box2</div><div class="box">Box3</div><div class="box">Box4</div>? 对应 CSS 样式（含默认态与交互提示）.box { width: 100px; height: 100px; background-color: lightgray; /* 默认背景色 */ text-align: center; line-height: 100px; cursor: pointer; margin: 5px; border-radius: 4px; transition: background-color 0.2s ease; /* 添加平滑过渡更专业 */}?? 核心 JavaScript 实现（无依赖，兼容现代浏览器）// 1. 获取所有 .box 元素const boxes = document.querySelectorAll('.box');// 2. 声明变量保存上一次被点击的元素（初始为 null）let prevBox = null;// 3. 为每个盒子绑定点击事件boxes.forEach(box => { box.addEventListener('click', () => { // 若存在之前选中的盒子，则还原其默认背景色 if (prevBox !== null) { prevBox.style.backgroundColor = 'lightgray'; } // 当前点击的盒子设为高亮色（如红色） box.style.backgroundColor = 'red'; // 更新 prevBox 引用，指向当前激活项 prevBox = box; });});? 关键设计说明状态管理清晰：通过 prevBox 变量显式追踪上一个激活元素，避免 DOM 遍历，性能高效；样式控制精准：直接操作 element.style.backgroundColor，优先级高于 CSS 类规则，确保即时生效；可扩展性强：如需支持多色主题，可将 'red' 替换为数组索引或 data 属性读取；若需复位功能（取消所有高亮），只需添加 prevBox = null; 并清空样式即可。?? 注意事项避免在内联样式中混用 !important，否则可能覆盖 JS 设置；若项目已使用 CSS-in-JS 或框架（如 React），推荐改用受控状态（如 useState）+ className 切换，以保持样式可维护性；移动端需注意 cursor: pointer 不生效，建议额外添加 touch-action: manipulation 提升响应体验。此方案简洁、健壮、零依赖，适用于教学演示、原型开发及轻量级生产场景。掌握该模式后，可快速迁移至 radio 按钮模拟、侧边栏菜单激活、轮播图指示器等常见交互需求。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。