本教程将详细介绍如何使用 JavaScript 实现动态菜单的点击高亮与取消高亮功能。通过事件委托和状态管理，我们能够高效地为菜单项添加点击事件，使其在被点击时显示绿色背景，同时将其他未选中项恢复为白色背景，确保无论点击顺序如何，效果都能准确呈现。
动态菜单高亮功能概述
在网页交互中，菜单是常见的导航元素。为了提升用户体验，当用户点击某个菜单项时，通常需要将其高亮显示，同时取消其他菜单项的高亮状态。这不仅能清晰地指示当前选中的是哪个选项，还能提供即时视觉反馈。本教程将采用一种高效且易于维护的方法来实现这一功能。
核心实现思路
实现菜单项的动态高亮，主要包含以下几个核心思想：
事件委托 (Event Delegation)：不为每个菜单项单独绑定点击事件，而是将事件监听器绑定到它们的共同父容器上。当事件在子元素上触发时，会向上冒泡到父容器，我们可以在父容器的事件监听器中判断是哪个子元素触发了事件，并进行相应处理。这种方式能有效减少事件监听器的数量，提高性能，尤其适用于菜单项数量不确定或动态增减的情况。状态管理 (State Management)：为了正确地“取消高亮”上一个选中的菜单项，我们需要一个变量来追踪当前哪个菜单项是高亮状态。当新的菜单项被点击时，我们可以先找到并重置上一个高亮项的样式，然后再高亮当前点击项。样式控制 (Style Control)：通过 JavaScript 直接修改元素的 backgroundColor 属性来实现高亮和取消高亮的效果。
详细实现步骤
我们将从 HTML 结构、CSS 样式和 JavaScript 逻辑三个方面来构建这个功能。
1. HTML 结构
首先，定义一个包含多个菜单项的 HTML 结构。每个菜单项都使用一个 p 标签，并带有相同的 menu 类，它们都包含在一个 container div 中。
2. CSS 样式
为了提供更好的视觉效果和用户体验，我们可以为菜单项设置默认样式和可选的悬停效果。默认情况下，所有菜单项背景色为白色。
立即学习“Java免费学习笔记（深入）”；
body { background-color: #efefef; font-family: sans-serif; }.menu { background-color: white; cursor: pointer; padding: 8px 15px; margin: 5px 0; border-radius: 4px; transition: background-color 0.2s ease; }.menu:hover { background-color: #e0e0e0; } /* 可选：鼠标悬停时的背景色 *//* .menu.active { background-color: #beffc7; } */ /* 另一种通过CSS类控制高亮的方式 */
注意：在上述 CSS 中，我们注释掉了一个 .menu.active 样式。虽然本教程的 JavaScript 部分将直接修改 style.backgroundColor，但在更复杂的应用中，通过添加/移除 CSS 类（如 .active）来控制样式是更推荐的做法，因为它能更好地分离结构、样式和行为。
3. JavaScript 逻辑
JavaScript 是实现动态高亮的核心。我们将使用事件委托机制，监听父容器的点击事件，并根据点击目标来更新菜单项的样式。
// 获取菜单容器元素let container = document.querySelector('.container');// 用于存储当前被选中（高亮）的菜单项的引用let currentActiveMenuItem = null; // 为容器添加点击事件监听器container.addEventListener("click", (event) => { // 检查点击事件的实际目标是否是具有 'menu' 类的元素 // event.target 指向实际触发事件的元素 if (event.target.matches('.menu')) { // 如果存在上一个被选中的菜单项，将其背景色恢复为白色 if (currentActiveMenuItem) { currentActiveMenuItem.style.backgroundColor = '#fff'; } // 如果当前点击的不是之前已经高亮的菜单项，则将其高亮 // 否则，如果点击的是同一个高亮项，则取消其高亮（使其变白） if (event.target !== currentActiveMenuItem) { event.target.style.backgroundColor = '#beffc7'; // 设置为绿色 // 更新 currentActiveMenuItem 为当前点击的元素 currentActiveMenuItem = event.target; } else { // 如果点击的是同一个高亮项，则取消高亮，并重置 currentActiveMenuItem event.target.style.backgroundColor = '#fff'; currentActiveMenuItem = null; } }});
代码解析：
let container = document.querySelector(‘.container’);：获取菜单项的父容器。let currentActiveMenuItem = null;：声明一个变量来保存当前高亮的菜单项引用。初始时没有高亮项，所以为 null。container.addEventListener(“click”, …)：在父容器上绑定点击事件。event.target.matches(‘.menu’)：这是一个非常重要的判断。event.target 是实际触发点击事件的 DOM 元素（可能是 p.menu）。matches() 方法检查该元素是否匹配给定的 CSS 选择器。这确保了只有点击到菜单项时才执行后续逻辑，而不是点击容器的其他空白区域。if (currentActiveMenuItem)：检查是否存在之前高亮的菜单项。如果存在，将其 backgroundColor 设置回白色 (#fff)。if (event.target !== currentActiveMenuItem)：判断当前点击的菜单项是否是已经高亮的那个。如果不是同一个，则将 event.target (当前点击的菜单项) 的背景色设置为绿色 (#beffc7)，并更新 currentActiveMenuItem 为当前点击的元素。如果是同一个，则取消其高亮（变白），并将 currentActiveMenuItem 重置为 null，实现点击已高亮项取消高亮的功能。
完整示例代码
将上述 HTML、CSS 和 JavaScript 组合起来，形成一个完整的可运行示例。
动态菜单高亮 body { background-color: #efefef; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .menu { background-color: white; cursor: pointer; padding: 8px 15px; margin: 5px 0; border-radius: 4px; transition: background-color 0.2s ease; } .menu:hover { background-color: #e0e0e0; } /* 鼠标悬停时的背景色 */let container = document.querySelector('.container'); let currentActiveMenuItem = null; // To hold reference to last 'clicked' menu item container.addEventListener("click", (event) => { // When a .menu inside .container gets clicked if (event.target.matches('.menu')) { // If 'currentActiveMenuItem' exists/defined, make it white if (currentActiveMenuItem) { currentActiveMenuItem.style.backgroundColor = '#fff'; } // If 'clicked' is not the current active item, toggle to green if (event.target !== currentActiveMenuItem) { event.target.style.backgroundColor = '#beffc7'; // Set to green currentActiveMenuItem = event.target; // Save reference to clicked element for next 'click' } else { // If clicked the same active item, deselect it event.target.style.backgroundColor = '#fff'; currentActiveMenuItem = null; } } });
注意事项与最佳实践
CSS 类管理 vs. 内联样式：尽管本教程为了简洁直接修改了 style.backgroundColor，但在大型项目中，更推荐通过添加或移除 CSS 类（如 .active）来管理高亮状态。例如，可以定义 .menu.active { background-color: #beffc7; }，然后用 JavaScript 切换元素的 classList.add(‘active’) 和 classList.remove(‘active’)。这种方式能更好地分离样式和行为，使 CSS 样式更易于管理和复用。初始选中状态：如果页面加载时需要某个菜单项默认是高亮状态，可以在 JavaScript 初始化时手动设置 currentActiveMenuItem 并为其添加高亮样式。可访问性 (Accessibility)：对于专业的教程，建议考虑为菜单项添加 ARIA 属性，例如 aria-current=”page” 或 aria-selected=”true”，以提升屏幕阅读器等辅助技术的用户体验。性能：事件委托是处理动态列表事件的最佳实践之一，它显著优于为每个元素单独绑定事件监听器，尤其在元素数量多或动态变化时。
总结
通过本教程，我们学习了如何利用 JavaScript 的事件委托机制和简单的状态管理，实现一个动态、高效且用户友好的菜单点击高亮功能。这种方法不仅代码简洁，易于理解和维护，而且在性能上也表现出色，是构建交互式网页菜单的理想选择。
以上就是JavaScript 动态菜单选中效果实现：点击高亮与取消高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522812.html
微信扫一扫 
支付宝扫一扫 
