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

本文详解如何使用原生 JavaScript 实现“单选高亮”效果点击任一 .box 元素时仅该元素变为指定颜色其余同组元素自动恢复默认背景色。 本文详解如何使用原生 javascript 实现“单选高亮”效果点击任一 .box 元素时仅该元素变为指定颜色其余同组元素自动恢复默认背景色。在构建交互式 UI 时常需实现“单选状态高亮”——例如选项卡、颜色选择器或步骤导航。核心逻辑是同一时刻仅一个元素处于激活态其他必须同步重置。下面以四个具有相同类名 .box 的 div 为例提供完整、可直接运行的解决方案。? 基础 HTML 结构div classboxBox1/divdiv classboxBox2/divdiv classboxBox3/divdiv classboxBox4/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. 声明变量保存上一次被点击的元素初始为 nulllet 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助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。