本文介绍一种可扩展、语义清晰的 javascript + css 方案，通过 data 属性与 css 自定义变量实现多按钮-多色区块的“单选式”激活效果，避免硬编码、提升维护性。
在构建带视觉反馈的侧边菜单时，常见需求是：点击某个按钮，仅对应下方的
显示专属背景色（如蓝色），其余全部恢复默认（如透明/白色），且支持任意数量的按钮与区块。原始代码中为每个按钮单独绑定事件并手动设置样式，不仅冗余，更难以维护——当新增第 6、第 100 个选项时，需重复编写几乎相同的逻辑。
核心思路是解耦与抽象：
✅ 不再为每个按钮写独立事件监听器；
✅ 不再用 element.style.backgroundColor = 'xxx' 直接操作内联样式；
✅ 改用语义化 data-targetid 属性声明按钮与目标区块的映射关系；
✅ 利用 CSS 自定义属性 --bg 存储各区块专属颜色，并通过 .is-active 类统一控制生效逻辑；
✅ 使用 classList.toggle(className, condition) 实现“仅当前激活、其余关闭”的原子操作。
以下是完整、可直接运行的实现方案：
✅ HTML（结构清晰，语义明确）
<nav id="menu-desc"><button class="button" data-targetid="box1">Link 1</button> <div class="menu-item-box" style="--bg:#00f;" id="box1"></div> <button class="button" data-targetid="box2">Link 2</button> <div class="menu-item-box" style="--bg:#f00;" id="box2"></div> <button class="button" data-targetid="box3">Link 3</button> <div class="menu-item-box" style="--bg:#0f0;" id="box3"></div> <button class="button" data-targetid="box4">Link 4</button> <div class="menu-item-box" style="--bg:#ff0;" id="box4"></div> <button class="button" data-targetid="box5">Link 5</button> <div class="menu-item-box" style="--bg:#f0f;" id="box5"></div> </nav>
? 注意：style="--bg: #00f;" 是关键——它将颜色值作为 CSS 变量注入到该元素作用域，后续可通过 var(--bg) 在样式中复用。
✅ CSS（专注表现，逻辑分离）
/* 重置与基础布局 */
* {
box-sizing: border-box;
margin: 0; /* 避免通配符使用 margin: 10px 导致不可控外边距 */
}
.body { display: flex; }
.sidebar { width: 500px; }
.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; /* 左侧无边框，形成“L”形视觉区隔 */
background-color: transparent;
}
/* 激活态：仅当添加 .is-active 类时，才读取并应用 --bg 值 */
.menu-item-box.is-active {
background-color: var(--bg);
}
✅ JavaScript（简洁、可扩展、无副作用）
// 一次性缓存所有按钮和区块元素（性能优化）
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; // 获取 data-targetid 值，如 "box1"
// 遍历所有区块，仅对匹配 ID 的添加 .is-active，其余移除
boxes.forEach(box => {
box.classList.toggle("is-active", box.id === targetId);
});
});
});
⚠️ 注意事项与最佳实践
- *不要滥用 ` { margin: 10px }**：全局重置应使用margin: 0; padding: 0;`，再按需为具体组件设置间距，否则易引发布局错乱。
-
CSS 变量作用域精准：style="--bg: #00f;" 仅影响该 及其子元素，完全隔离各区块颜色，互不干扰。
- .toggle(className, boolean) 是关键：它自动处理“添加/移除”逻辑，比手动 classList.remove() + classList.add() 更安全可靠。
- 扩展性极强：新增按钮只需添加一对
