如何用 JavaScript 实现单选式盒子颜色切换（点击高亮，其余复原）-js教程-PHP中文网

本文详解如何使用原生 JavaScript 实现“单选高亮”效果：点击任一 .box 元素时，仅该元素变为指定颜色，其余同组元素自动恢复默认背景色。

本文详解如何使用原生 javascript 实现“单选高亮”效果：点击任一 `.box` 元素时，仅该元素变为指定颜色，其余同组元素自动恢复默认背景色。

在构建交互式 UI 时，常需实现“单选状态高亮”——例如选项卡、颜色选择器或步骤导航。核心逻辑是：同一时刻仅一个元素处于激活态，其他必须同步重置。下面以四个具有相同类名 .box 的

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

为例，提供完整、可直接运行的解决方案。

✅ 基础 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; 并清空样式即可。