1. 引言：动态菜单选择的需求
在现代网页应用中，交互式菜单是不可或缺的组成部分。当用户点击菜单项时，通常需要通过视觉反馈（如改变背景色）来明确当前选中的是哪个选项。这种“点击选中，其他取消选中”的功能，要求无论用户从上往下点击，还是从下往上点击，甚至重复点击同一个菜单项，都能正确地更新选中状态。传统的做法可能会尝试遍历所有菜单项来设置颜色，但这种方法往往效率低下且容易出错。本教程将展示一种更简洁、高效且易于维护的实现方式。
2. 优化方案核心思想：事件委托与状态管理
为了实现高效的菜单项选择功能，我们将采用以下核心策略：
- CSS默认状态管理： 通过CSS设置菜单项的默认背景色，确保未选中项始终保持统一的视觉状态。
- 事件委托（Event Delegation）： 不为每个菜单项单独添加事件监听器，而是在它们的共同父元素上添加一个事件监听器。这样可以减少内存消耗，并能自动处理未来动态添加的菜单项。
- 状态管理变量： 使用一个JavaScript变量来跟踪当前被选中的菜单项，以便在新的菜单项被点击时，能够快速地将前一个选中项恢复到默认状态。
3. HTML结构准备
首先，我们需要一个包含多个菜单项的HTML结构。这里我们使用一个div作为容器，内部包含多个p标签作为菜单项。
<div class="container">
<p class="menu">Home</p>
<p class="menu">Gallery</p>
<p class="menu">Technology</p>
<p class="menu">Information</p>
<p class="menu">Contact</p>
<p class="menu">About</p>
</div>4. CSS样式定义
接下来，我们为菜单项定义基本的样式。关键在于设置默认的背景色和可选的鼠标悬停效果，以提升用户体验。
立即学习“Java免费学习笔记（深入）”；
body {
background-color: #efefef; /* 页面背景色 */
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
border: 1px solid #ddd;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.menu {
background-color: white; /* 默认背景色为白色 */
padding: 8px 15px;
margin: 5px 0;
cursor: pointer; /* 鼠标悬停时显示手型 */
border-radius: 3px;
transition: background-color 0.2s ease; /* 平滑过渡效果 */
}
/* [可选] 鼠标悬停效果，提供更好的用户反馈 */
.menu:hover {
background-color: #e0ffe5; /* 悬停时变为浅绿色 */
}5. JavaScript实现动态选中逻辑
现在，我们将编写JavaScript代码来实现点击选中和取消选中的功能。
<script>
// 获取菜单容器元素
let container = document.querySelector('.container');
// 定义一个变量来存储当前被选中的菜单项的引用
let currentActiveMenuItem = null;
// 为容器添加事件监听器，利用事件委托
container.addEventListener("click", (event) => {
// 检查点击事件的目标是否是我们定义的菜单项（class为'menu'）
if (event.target.matches('.menu')) {
// 如果存在上一个被选中的菜单项，将其背景色恢复为白色
if (currentActiveMenuItem) {
currentActiveMenuItem.style.backgroundColor = '#FFFFFF';
}
// 将当前点击的菜单项的背景色设置为绿色
event.target.style.backgroundColor = '#BEFFC7'; // 浅绿色
// 更新 currentActiveMenuItem 变量，指向当前被选中的菜单项
currentActiveMenuItem = event.target;
}
});
</script>6. 代码解释与注意事项
let container = document.querySelector('.container');: 获取包裹所有菜单项的父容器。这是事件委托的关键，我们只在这个父容器上监听点击事件。
let currentActiveMenuItem = null;: 这是一个状态变量，用于存储当前被激活（即被选中）的菜单项的DOM元素引用。初始值为null，表示没有任何菜单项被选中。
container.addEventListener("click", (event) => { ... });: 在container上注册一个点击事件监听器。当container内部的任何元素被点击时，此函数都会被触发。
if (event.target.matches('.menu')) { ... }: event.target指向实际被点击的DOM元素。matches('.menu')方法检查被点击的元素是否具有menu类。这确保了只有点击到菜单项时，才执行后续的选中逻辑，而点击容器的其他空白区域则不会触发。
if (currentActiveMenuItem) { currentActiveMenuItem.style.backgroundColor = '#FFFFFF'; }: 如果currentActiveMenuItem不为null（即之前有菜单项被选中），则将其背景色重置为白色。这是实现“取消选中其他项”的关键步骤。
event.target.style.backgroundColor = '#BEFFC7';: 将被点击的菜单项的背景色设置为指定的绿色（#BEFFC7）。
currentActiveMenuItem = event.target;: 更新currentActiveMenuItem变量，使其指向当前被点击并设置为绿色的菜单项。这样，在下一次点击时，我们就能知道哪个是上一个被选中的项。
注意事项：
- 事件委托的优势： 使用事件委托（在父元素上监听事件）相比于给每个子元素添加监听器，具有更高的性能。尤其当菜单项数量很多或未来可能动态增减时，这种方式更加高效和灵活。
- CSS与JS职责分离： 尽量将元素的默认样式和非选中状态的样式通过CSS来管理，JavaScript只负责处理动态的选中/非选中状态切换。这样代码结构更清晰，也便于样式修改。
- 颜色选择： 示例中使用了特定的绿色和白色。在实际项目中，应根据设计规范选择合适的颜色，并可以考虑使用CSS变量来管理颜色，提高可维护性。
- 初始选中状态： 如果页面加载时需要默认选中某个菜单项，可以在JavaScript代码加载后，手动触发一次选中逻辑，或者直接在HTML中为该菜单项添加一个初始的选中样式类。
7. 总结
通过采用事件委托和状态管理变量，我们成功实现了一个高效、灵活且易于维护的动态菜单项点击选中功能。这种方法避免了对所有菜单项进行遍历的复杂性和性能开销，确保了无论用户以何种顺序点击菜单项，都能获得准确且响应迅速的视觉反馈。这种模式不仅适用于菜单选择，也可推广到其他需要“单选”或“互斥选择”的UI组件中。
