本文介绍一种可扩展、语义清晰的 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 变量承载样式变量，用批量操作替代硬编码。
