Vue.js实现列表菜单项单个激活active类问题求助

嘿，这个问题我太熟了！很多刚接触前端的朋友都会踩这个小坑——本来只想让点击的菜单项单独激活，结果所有菜单都跟着切换状态。下面根据不同技术栈，给你几个最实用的最优方案：

一、原生JavaScript方案（无框架依赖） #

这是最基础的实现方式，适合纯静态页面或者小型项目。核心思路是：点击某一项时，先移除所有菜单项的active类，再给当前点击的项添加active类。如果想更高效，可以先找到当前已激活的项，只移除它的类，避免遍历所有元素。

基础实现（通用场景） #

// 获取所有菜单项
const menuItems = document.querySelectorAll('.menu-item');

// 给每个菜单项绑定点击事件
menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有菜单项的active类
    menuItems.forEach(menu => menu.classList.remove('active'));
    // 给当前点击的项添加active类
    this.classList.add('active');
  });
});

优化版（性能更优） #

如果菜单数量较多，这个版本只操作当前激活项和点击项，减少DOM操作次数：

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 先找到当前已经激活的项，移除它的active类
    const currentActive = document.querySelector('.menu-item.active');
    if (currentActive) currentActive.classList.remove('active');
    // 给当前点击的项添加active类
    this.classList.add('active');
  });
});

二、jQuery方案（适合老项目） #

如果你的项目还在使用jQuery，那实现起来会更简洁，一行核心代码就能搞定：

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

三、现代前端框架方案（Vue/React） #

在Vue、React这类数据驱动的框架中，不要直接操作DOM，而是通过状态管理来控制类的切换，这才是框架下的最优实践。

Vue示例 #

<template>
  <div class="menu">
    <div 
      v-for="(item, index) in menuList" 
      :key="item.id"
      class="menu-item"
      :class="{ active: activeIndex === index }"
      @click="activeIndex = index"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [{id:1, name:'首页'}, {id:2, name:'文章'}, {id:3, name:'关于'}],
      activeIndex: 0 // 默认激活第一个项
    }
  }
}
</script>

React示例 #

import { useState } from 'react';

const Menu = () => {
  const menuList = [{id:1, name:'首页'}, {id:2, name:'文章'}, {id:3, name:'关于'}];
  const [activeId, setActiveId] = useState(1); // 默认激活id为1的项

  return (
    <div className="menu">
      {menuList.map(item => (
        <div
          key={item.id}
          className={`menu-item ${activeId === item.id ? 'active' : ''}`}
          onClick={() => setActiveId(item.id)}
        >
          {item.name}
        </div>
      ))}
    </div>
  );
};

export default Menu;

关键注意点 #

• 原生JS中，如果使用箭头函数绑定点击事件，this会指向全局对象（window），所以要改用event.target来获取当前点击的元素，或者使用普通函数。
• 框架中一定要遵循数据驱动DOM的原则，避免直接调用document或$来操作DOM，否则会破坏框架的响应式机制。

内容的提问来源于stack exchange，提问作者Giacomo Ciampoli