本教程详细讲解如何使用JavaScript实现菜单项的单选高亮效果。通过遍历所有菜单项，在每次点击时首先移除所有已激活项的样式，然后将激活样式应用到当前被点击的菜单项，确保始终只有一个菜单项处于高亮状态，从而优化用户交互体验。
1. 问题背景与核心原理
在构建交互式网页界面时，菜单导航是一个常见元素。我们通常希望当用户点击某个菜单项时，该项能高亮显示，以明确指示当前的选择或活动状态。然而，如果处理不当，可能会出现所有被点击过的菜单项都保持高亮的情况，这显然不符合“单选”的预期。
为了实现每次只有一个菜单项高亮的效果，其核心原理是：在任何菜单项被点击时，首先清除所有菜单项当前的激活状态（即移除它们的激活样式），然后再将激活样式精确地应用到当前被点击的菜单项上。这种“先清除所有，再激活当前”的模式是实现独占选择状态的关键。
2. 页面结构 (html)
首先，我们需要一个清晰的HTML结构来表示我们的菜单。以下是一个典型的侧边导航菜单结构，其中包含多个 div.menu_header 作为可点击的菜单标题。
<nav id="nav_menu_query_off"> <menu id="main_menu"> <li class="main_list_item"> <div class="menu_header">菜单一</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">菜单二</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">菜单三</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> <li class="main_list_item"> <div class="menu_header">菜单四</div> <div class="menu_body"> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> <menu class="sub_menu"></menu> </div> </li> </menu> </nav>
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）等。掌握这一基本模式，将极大地帮助您构建出更具交互性、用户友好且逻辑清晰的网页界面。
