本文介绍如何通过 javascript 动态管理多个色块的点击状态，确保仅最后一个被点击的色块保持高亮（如深灰色），其余恢复为页面当前背景色，同时同步更新页面文字颜色以保证可读性。
本文介绍如何通过 javascript 动态管理多个色块的点击状态，确保仅最后一个被点击的色块保持高亮（如深灰色），其余恢复为页面当前背景色，同时同步更新页面文字颜色以保证可读性。
在构建交互式色彩切换器时，一个常见需求是：点击某个色块，不仅将页面背景设为该色块对应的颜色，还需视觉上标记“当前选中项”。关键难点在于状态独占——每次仅允许一个色块处于高亮状态，且需自动清除前一次的高亮效果。
解决方案的核心逻辑是：在每次点击事件中，先统一重置所有色块的背景色为当前页面背景色，再将被点击的目标色块设为高亮色（如 #343434）。这避免了手动维护“上一个激活元素”的引用，更简洁可靠。
以下是优化后的完整 JavaScript 实现：
const h2 = document.querySelector("h2");
const p = document.querySelector("p");
const boxes = document.querySelectorAll(".box");
const body = document.body;
boxes.forEach((box) => {
box.addEventListener("click", (e) => {
const bgColor = e.target.id;
body.style.backgroundColor = bgColor;
// 根据背景色动态调整文字对比度
if (bgColor === "white" || bgColor === "yellow") {
h2.style.color = "black";
p.style.color = "black";
} else {
h2.style.color = "white";
p.style.color = "white";
}
// 遍历所有色块，仅高亮当前点击项，其余设为页面背景色
boxes.forEach((otherBox) => {
if (otherBox === e.target) {
otherBox.style.backgroundColor = "#343434"; // 高亮色（深灰）
} else {
otherBox.style.backgroundColor = bgColor; // 恢复为当前页面背景色
}
});
});
});
⚠️ 注意事项：
- CSS 优先级问题：原始 HTML 中部分色块（如 #grey、#blue）使用 ID 选择器设置了初始背景色，而 JS 直接操作 style.backgroundColor 属于内联样式，优先级更高，因此能正常覆盖。但若后续引入更高级别的 CSS 规则（如 !important），可能干扰 JS 控制，建议统一用类控制初始状态。
- 语义化与可访问性：当前方案依赖视觉反馈，建议为高亮色块添加 aria-current="true" 属性，并配合 tabindex="0" 支持键盘导航，提升无障碍体验。
- 性能考量：本例中色块数量少，遍历开销可忽略；若扩展至数十个以上，可考虑缓存上一个激活元素引用并仅修改两个节点，但当前方案已具备良好可读性与维护性。
最终效果：用户每次点击任意色块，页面背景即时切换，标题与段落文字自动适配对比度，且仅该色块变为深灰色高亮——清晰传达“当前生效项”，符合直觉化交互设计原则。
