1. 问题背景与核心原理
在构建交互式网页界面时，菜单导航是一个常见元素。我们通常希望当用户点击某个菜单项时，该项能高亮显示，以明确指示当前的选择或活动状态。然而，如果处理不当，可能会出现所有被点击过的菜单项都保持高亮的情况，这显然不符合“单选”的预期。
为了实现每次只有一个菜单项高亮的效果，其核心原理是：在任何菜单项被点击时，首先清除所有菜单项当前的激活状态（即移除它们的激活样式），然后再将激活样式精确地应用到当前被点击的菜单项上。这种“先清除所有，再激活当前”的模式是实现独占选择状态的关键。
2. 页面结构 (HTML)
首先，我们需要一个清晰的HTML结构来表示我们的菜单。以下是一个典型的侧边导航菜单结构，其中包含多个 div.menu_header 作为可点击的菜单标题。
3. 样式定义 (CSS)
为了让菜单项在激活时有明显的视觉反馈，我们定义一个CSS类，例如 .active_red。当这个类被添加到菜单项上时，其文本颜色将变为红色。同时，我们也包含了一些基础的菜单布局和样式。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body {
font-family: 'Ebrima';
background-color: #444444;
}
nav#nav_menu_query_off {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background-color: #222222;
overflow: auto;
z-index: 2;
padding: 20px 0 20px 20px;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
text-transform: uppercase;
padding-bottom: 10px;
cursor: pointer; /* 指示元素可点击 */
}
nav#nav_menu_query_off menu li {
color: #f0f0f0;
}
nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
padding-top: 20px;
}
.active_red {
color: red; /* 激活时文本颜色变为红色 */
}
nav::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}4. 交互逻辑 (JavaScript)
这是实现单选高亮效果的核心部分。我们将使用JavaScript来监听每个菜单项的点击事件，并在事件触发时执行“清除所有，激活当前”的逻辑。
立即学习“Java免费学习笔记（深入）”；
// 1. 获取所有具有 'menu_header' 类的元素
const menuHeaders = document.querySelectorAll('.menu_header');
// 2. 定义一个辅助函数，用于从一组元素中移除 'active_red' 类
function removeActiveClass(elements) {
elements.forEach(el => el.classList.remove('active_red'));
}
// 3. 为每个菜单头部元素添加点击事件监听器
menuHeaders.forEach(head => {
head.addEventListener('click', () => {
// 每次点击时，首先移除所有菜单项的 'active_red' 类
// 这一步是确保只有当前点击项高亮的关键
removeActiveClass(menuHeaders);
// 然后将 'active_red' 类添加到当前被点击的元素上
head.classList.add('active_red');
});
});代码解析：
- document.querySelectorAll('.menu_header')：此行代码用于选中页面上所有带有 menu_header 类的元素。它返回一个 NodeList，这是一个类似数组的集合，包含了所有匹配的元素。
- removeActiveClass(elements) 函数：这是一个封装好的辅助函数，其作用是遍历传入的元素集合，并从每个元素的 classList 中移除 active_red 类。这实现了“清除所有”的逻辑。
- menuHeaders.forEach(head => { ... })：我们遍历 menuHeaders 集合中的每一个菜单头部元素，并为它们各自添加一个 click 事件监听器。
- 在事件监听器内部：
- removeActiveClass(menuHeaders)：这是最关键的一步。在任何菜单项被点击时，我们首先调用此函数，确保所有菜单项（包括之前被激活的）都恢复到非激活状态。
- head.classList.add('active_red')：紧接着，我们将 active_red 类添加到当前被点击的 head 元素上，使其高亮显示。
通过这种方式，无论用户点击哪个菜单项，系统都会先“重置”所有菜单项的状态，然后再“设置”当前点击项的状态，从而保证了单选高亮的效果。
5. 注意事项
- 初始激活状态： 如果您希望页面加载时就有某个菜单项默认处于激活状态，可以在其HTML标签上直接添加 active_red 类，或者在JavaScript加载完成后，通过代码手动激活第一个或指定菜单项。
- 性能考量： 对于包含大量菜单项的极端情况，每次点击都遍历所有元素来移除类可能存在轻微的性能开销。在这种场景下，可以考虑使用事件委托（Event Delegation）来优化，即只在菜单的父元素上添加一个事件监听器，通过事件冒泡机制来判断哪个子元素被点击，并进行相应处理。但对于一般规模的菜单，当前方法足够高效且易于理解。
- 语义化与可访问性： 为了提升用户体验和可访问性，特别是对于使用屏幕阅读器的用户，可以考虑在激活的菜单项上添加ARIA属性，例如 aria-current="page" 或 aria-selected="true"，以更明确地指示当前项的状态。
- CSS过渡效果： 如果希望高亮效果切换时更平滑，可以在CSS中为 .menu_header 添加 transition 属性，例如 transition: color 0.3s ease;。
6. 总结
本教程详细阐述了如何使用JavaScript结合CSS实现菜单项的单选高亮效果。核心在于采用“先清除所有，再激活当前”的逻辑模式。这一模式不仅适用于菜单高亮，也广泛应用于各种需要独占选择状态的UI组件，如选项卡（Tabs）、手风琴（Accordions）等。掌握这一基本模式，将极大地帮助您构建出更具交互性、用户友好且逻辑清晰的网页界面。
