本文介绍一种可扩展、语义清晰的 javascript 方案：通过 `data-targetid` 属性关联按钮与目标 div，结合 css 自定义属性（`--bg`）和 `is-active` 类控制颜色切换，避免硬编码，支持任意数量菜单项。
要实现“点击按钮 → 对应 div 显示专属颜色，其余恢复默认”的交互效果，核心在于解耦状态管理：不能为每个按钮单独写事件监听器（如原始代码中 button1, button2…），否则维护成本随项目规模指数级上升。理想方案应具备可复用性、可读性与可扩展性。
✅ 推荐方案：语义化数据属性 + CSS 变量 + 批量类控制
1. HTML：用 data-targetid 建立映射关系
为每个按钮添加 data-targetid 属性，其值等于对应
的 id；同时在每个 .menu-item-box 中通过 style="--bg: #color" 内联声明专属背景色：
? 提示：data-targetid 是自定义数据属性，语义明确且浏览器原生支持，比硬编码 ID 名称更健壮。
2. CSS：用 var(--bg) 实现动态背景色
仅需一条规则即可统一处理所有激活态，无需为每个 box 写独立样式：
.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 值 */
}⚠️ 注意：var(--bg) 必须配合 style="--bg: #xxx" 使用，否则无默认值会回退为 transparent。
立即学习“前端免费学习笔记（深入）”；
3. JavaScript：批量监听 + 精准激活
一次性获取所有按钮和盒子，点击时遍历所有盒子，仅对匹配 id === dataset.targetid 的元素添加 is-active 类，其余自动移除：
// 缓存 DOM 元素（提升性能）
const buttons = document.querySelectorAll("#menu-desc .button");
const boxes = document.querySelectorAll("#menu-desc .menu-item-box");
buttons.forEach(button => {
button.addEventListener("click", () => {
const targetId = button.dataset.targetid;
boxes.forEach(box => {
// 精确匹配：仅激活目标 box，其余清除 is-active
box.classList.toggle("is-active", box.id === targetId);
});
});
});✅ 优势总结：
- ✅ 零重复代码：新增第 6 个按钮？只需复制一行 HTML，无需修改 JS/CSS；
- ✅ 样式与逻辑分离：颜色由 HTML style 控制，状态由类名控制，职责清晰；
- ✅ 性能友好：使用 querySelectorAll 一次获取全部元素，避免多次 DOM 查询；
- ✅ 无障碍友好：按钮语义正确（
? 进阶建议（可选）
- 若需初始激活某一项，可在 HTML 中直接添加 class="is-active" 到对应 ；
- 配合 CSS 过渡实现平滑变色：.menu-item-box { transition: background-color 0.2s ease; }；
- 如需支持键盘导航（Tab + Enter），可为按钮添加 role="tab" 并监听 keydown 事件。
这套模式不仅解决了当前问题，更是构建可维护前端交互的通用范式——用语义化标记驱动行为，用 CSS 变量承载样式变量，用批量操作替代硬编码。
