JavaScript 动态菜单选中效果实现：点击高亮与取消高亮-js教程-PHP中文网

JavaScript 动态菜单选中效果实现：点击高亮与取消高亮

DDD

发布： 2025-09-25 11:34:01

原创

301人浏览过

JavaScript 动态菜单选中效果实现：点击高亮与取消高亮

本教程将详细介绍如何使用 JavaScript 实现动态菜单的点击高亮与取消高亮功能。通过事件委托和状态管理，我们能够高效地为菜单项添加点击事件，使其在被点击时显示绿色背景，同时将其他未选中项恢复为白色背景，确保无论点击顺序如何，效果都能准确呈现。

动态菜单高亮功能概述

在网页交互中，菜单是常见的导航元素。为了提升用户体验，当用户点击某个菜单项时，通常需要将其高亮显示，同时取消其他菜单项的高亮状态。这不仅能清晰地指示当前选中的是哪个选项，还能提供即时视觉反馈。本教程将采用一种高效且易于维护的方法来实现这一功能。

核心实现思路

实现菜单项的动态高亮，主要包含以下几个核心思想：

事件委托 (Event Delegation)：不为每个菜单项单独绑定点击事件，而是将事件监听器绑定到它们的共同父容器上。当事件在子元素上触发时，会向上冒泡到父容器，我们可以在父容器的事件监听器中判断是哪个子元素触发了事件，并进行相应处理。这种方式能有效减少事件监听器的数量，提高性能，尤其适用于菜单项数量不确定或动态增减的情况。
状态管理 (State Management)：为了正确地“取消高亮”上一个选中的菜单项，我们需要一个变量来追踪当前哪个菜单项是高亮状态。当新的菜单项被点击时，我们可以先找到并重置上一个高亮项的样式，然后再高亮当前点击项。
样式控制 (Style Control)：通过 JavaScript 直接修改元素的 backgroundColor 属性来实现高亮和取消高亮的效果。

详细实现步骤

我们将从 HTML 结构、CSS 样式和 JavaScript 逻辑三个方面来构建这个功能。

1. HTML 结构

首先，定义一个包含多个菜单项的 HTML 结构。每个菜单项都使用一个 p 标签，并带有相同的 menu 类，它们都包含在一个 container div 中。

<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>

登录后复制

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）来控制样式是更推荐的做法，因为它能更好地分离结构、样式和行为。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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 组合起来，形成一个完整的可运行示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态菜单高亮</title>
    <style>
        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; } /* 鼠标悬停时的背景色 */
    </style>
</head>
<body>

<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>

<script>
    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;
            }
        }
    });
</script>

</body>
</html>

登录后复制

注意事项与最佳实践

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"，以提升屏幕阅读器等辅助技术的用户体验。
性能：事件委托是处理动态列表事件的最佳实践之一，它显著优于为每个元素单独绑定事件监听器，尤其在元素数量多或动态变化时。