如何使用jQuery为元素添加/移除active类？垂直菜单实现求助

没问题，我来帮你搞定这个jQuery添加/移除active类的问题，尤其是你的垂直菜单场景！

一、基础：jQuery添加、移除、切换active类的方法 #

先给你梳理下最常用的几个操作：

• 添加active类：用addClass()方法给指定元素加上高亮类：

  // 给id为test的元素添加active类
  $('#test').addClass('active');
  

• 移除active类：用removeClass()方法移除元素上的指定类：

  // 移除id为test的元素的active类
  $('#test').removeClass('active');
  

• 切换active类：用toggleClass()方法自动切换类状态（有则移除，无则添加）：

  // 切换id为test的元素的active类状态
  $('#test').toggleClass('active');
  

二、针对你的垂直菜单场景的解决方案 #

看了你的代码，菜单的激活类是vertical__menu-item--active，默认第一个菜单项已激活。要实现点击菜单项时切换这个类，直接用下面的代码就能搞定：

完整jQuery代码： #

$(document).ready(function() {
  // 给所有菜单选项绑定点击事件
  $('.vertical__menu-item').on('click', function(e) {
    // 阻止<a>标签默认的跳转行为（你的href是#，点击会跳页面顶部，这行能避免这个问题）
    e.preventDefault();
    
    // 先移除所有菜单的激活类，保证同一时间只有一个激活项
    $('.vertical__menu-item').removeClass('vertical__menu-item--active');
    
    // 给当前点击的菜单添加激活类
    $(this).addClass('vertical__menu-item--active');
  });
});

代码细节说明： #

1. $(document).ready()：确保DOM完全加载后再执行代码，避免出现找不到元素的情况。
2. e.preventDefault()：如果你的菜单是跳转到其他页面，这行可以删掉；但你的href是#，加上这行能防止点击后页面跳转到顶部。
3. 先移除所有激活类：这是垂直菜单的核心逻辑——同一时间只能有一个菜单项处于激活状态。
4. $(this)：指代当前被点击的那个<a>元素，精准给它添加激活类。

动态菜单的适配方案 #

如果你的菜单是通过AJAX或其他方式动态生成的，直接绑定事件会失效，这时候改用事件委托就能解决：

$(document).ready(function() {
  // 把事件绑定到document上，动态添加的菜单也能触发
  $(document).on('click', '.vertical__menu-item', function(e) {
    e.preventDefault();
    $('.vertical__menu-item').removeClass('vertical__menu-item--active');
    $(this).addClass('vertical__menu-item--active');
  });
});

内容的提问来源于stack exchange，提问作者Milos Vujinic