JavaScript如何实现动态菜单点击高亮效果

动态菜单点击高亮效果的核心逻辑是监听菜单项的点击事件，在点击时移除其他菜单项的高亮类名，再给当前点击的菜单项添加高亮类名，从而实现选中状态的高亮展示。

基础菜单结构搭建

首先我们需要搭建一个基础的动态菜单HTML结构，菜单项使用无序列表实现，每个菜单项对应一个可点击的链接元素，整体结构如下：

<ul class="menu">
  <li class="menu-item"><a href="javascript:void(0)">首页</a></li>
  <li class="menu-item"><a href="javascript:void(0)">产品中心</a></li>
  <li class="menu-item"><a href="javascript:void(0)">解决方案</a></li>
  <li class="menu-item"><a href="javascript:void(0)">关于我们</a></li>
</ul>

高亮样式定义

我们需要定义两个样式，一个是菜单项的默认样式，另一个是高亮状态下的样式，这里通过添加active类名来标识高亮状态：

/* 菜单基础样式 */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}
.menu-item a {
  text-decoration: none;
  color: #333;
  padding: 8px 16px;
  display: inline-block;
  border-radius: 4px;
  transition: all 0.3s;
}
/* 高亮样式 */
.menu-item.active a {
  color: #fff;
  background-color: #1890ff;
}

JavaScript核心实现逻辑

接下来编写JavaScript代码实现点击高亮效果，核心步骤分为三步：获取所有菜单项元素、给每个菜单项绑定点击事件、在事件处理函数中切换高亮类名。

原生JavaScript实现方式

使用原生JavaScript的实现代码如下：

// 获取所有菜单项元素
const menuItems = document.querySelectorAll('.menu-item');
// 遍历菜单项绑定点击事件
menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 先移除所有菜单项的active类名
    menuItems.forEach(el => {
      el.classList.remove('active');
    });
    // 给当前点击的菜单项添加active类名
    this.classList.add('active');
  });
});

jQuery实现方式

如果项目中使用了jQuery库，也可以用更简洁的代码实现相同效果：

$('.menu-item').on('click', function() {
  // 移除所有菜单项的active类，给当前点击项添加active类
  $(this).addClass('active').siblings().removeClass('active');
});

常见问题与优化

在实际使用中可能会遇到一些问题，这里给出对应的优化方案：

• 如果页面初始需要默认选中某个菜单项，只需要在对应的li标签上提前添加active类名即可。
• 如果菜单是动态生成的，需要在菜单渲染完成后再执行事件绑定的代码，或者使用事件委托的方式绑定事件，避免动态添加的菜单项无法触发点击效果。
• 如果菜单项点击后需要跳转到新页面，可以在跳转前将当前选中的菜单项标识存储到本地存储，页面加载时读取标识并设置对应菜单项的高亮状态。

事件委托优化示例

针对动态生成菜单的场景，使用事件委托的实现代码如下：

// 给菜单容器绑定点击事件，利用事件冒泡处理子菜单项的点击
const menu = document.querySelector('.menu');
menu.addEventListener('click', function(e) {
  // 判断点击的目标是否是菜单项内的a标签
  const target = e.target;
  if (target.tagName === 'A' && target.parentElement.classList.contains('menu-item')) {
    const currentItem = target.parentElement;
    // 移除所有菜单项的高亮类
    const allItems = this.querySelectorAll('.menu-item');
    allItems.forEach(el => {
      el.classList.remove('active');
    });
    // 给当前点击项添加高亮类
    currentItem.classList.add('active');
  }
});

实现效果验证

完成上述代码后，在浏览器中打开页面，点击不同的菜单项，就可以看到被点击的菜单项会切换为蓝色背景白色文字的高亮状态，其他菜单项恢复默认样式，符合预期的交互效果。如果需要调整高亮的样式，只需要修改CSS中.menu-item.active a对应的属性即可，不需要改动JavaScript逻辑。

JavaScript动态菜单点击高亮前端交互修改时间：2026-07-11 20:00:24