本文介绍一种可扩展、语义清晰的 javascript + css 方案，通过 data-* 属性关联按钮与色块，利用 css 自定义属性（--bg）和 classlist.toggle() 实现单击高亮唯一色块，避免硬编码、便于维护。
在构建交互式侧边菜单时，常见的需求是：点击某个按钮，仅对应下方的色块（
）以指定颜色高亮，其余色块恢复默认（如透明或白色），且支持任意数量的按钮/色块对。初学者常采用为每个按钮单独绑定事件并手动设置样式的方式（如 box1.style.backgroundColor = "blue"），但这种写法存在明显缺陷——无法自动重置其他色块状态，代码冗余、难以维护，且无法随按钮数量增长而线性扩展。
✅ 推荐方案采用声明式+模块化设计思路，核心要点如下：
- HTML 层：使用 data-targetid 属性明确标识按钮与目标色块的映射关系；
- CSS 层：为色块定义 .is-active 类，并通过 background-color: var(--bg) 动态读取内联 CSS 变量；
- JS 层：批量获取按钮与色块元素，点击时遍历所有色块，仅对 id 匹配目标的色块添加 .is-active 类，其余自动移除。
以下是完整实现代码：
HTML（精简结构，含语义化 data 属性）：
CSS（聚焦状态控制与复用性）：
.button {
display: block;
height: 2rem;
font-size: 1.1rem;
text-transform: uppercase;
padding-left: calc(5px + 3vw);
background-color: transparent;
border: none;
cursor: pointer;
}
.menu-item-box {
height: 3em;
border: 3px solid #000;
border-left: none; /* 保持右侧、上、下边框 */
background-color: transparent;
}
.menu-item-box.is-active {
background-color: var(--bg); /* 关键：从内联 --bg 取值 */
}JavaScript（高效、可扩展的事件处理）：
// 一次性缓存 DOM 元素，提升性能
const buttons = document.querySelectorAll("#menu-desc .button");
const boxes = document.querySelectorAll("#menu-desc .menu-item-box");
buttons.forEach(btn => {
btn.addEventListener("click", () => {
const targetId = btn.dataset.targetid; // 获取目标色块 ID
boxes.forEach(box => {
// 仅当 box.id === targetId 时设为 active，否则移除
box.classList.toggle("is-active", box.id === targetId);
});
});
});? 关键优势说明：
- ✅ 零重复逻辑：无需为每个按钮写独立事件监听器；
- ✅ 样式与行为解耦：颜色定义在 HTML 的 style="--bg:..." 中，CSS 仅负责渲染逻辑；
- ✅ 开箱即用的可扩展性：新增按钮+色块只需复制 HTML 片段，无需修改 JS 或 CSS；
- ✅ 符合现代 Web 最佳实践：使用 dataset、classList.toggle() 和 CSS 自定义属性，语义清晰、兼容性好（IE11+ 支持基础功能，CSS 变量需 Edge 16+/Chrome 49+）。
⚠️ 注意事项：
- 避免在通配符选择器（如 *）中设置 margin 或 top，易引发布局异常；建议重置为 margin: 0; 后按需为具体组件设置间距；
- data-targetid 值必须严格匹配对应 的 id，大小写敏感；
- 若需支持旧版浏览器（如 IE），可将 var(--bg) 替换为预设类名（如 .box-blue），并在 JS 中动态切换类，但会牺牲灵活性。
该方案不仅解决了当前“多按钮单色块高亮”的问题，更建立了一套可复用于标签页、导航栏、选项卡等场景的通用交互模式。
