jQuery菜单Class切换需求：点击后保持绿色选中，切换菜单时交换状态

我来帮你搞定这个菜单点击选中状态的切换需求～你想要的是点击菜单后只有当前项保持绿色选中，其他项自动取消，对吧？咱们先看看原代码的问题，再给出修正方案：

原代码的问题 #

你的代码里用了$('.menuswap').toggleClass("menu")，这个操作只会切换指定元素的类，但没有先清除其他所有菜单的选中状态，所以会出现多个菜单同时被选中的情况，不符合你的需求。

修正后的实现方案 #

核心思路是：点击菜单时，先移除所有菜单的选中类，再给当前点击的菜单添加选中类。这样就能保证始终只有一个菜单处于选中状态。

完整代码示例 #

HTML（统一给菜单项加一个类，方便批量选择）

<div class="menu-group">
  <a href="#" class="menu-item active">首页</a>
  <a href="#" class="menu-item">产品列表</a>
  <a href="#" class="menu-item">关于我们</a>
</div>

CSS（定义选中状态的绿色样式）

.menu-item {
  margin: 0 12px;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s ease;
}
/* 选中状态的绿色样式 */
.menu-item.active {
  background-color: #27ae60;
  color: white;
  border-radius: 4px;
}

JavaScript（用jQuery实现切换逻辑）

$('.menu-item').on('click', function(e) {
  e.preventDefault(); // 阻止链接默认跳转行为
  
  // 第一步：移除所有菜单项的选中类
  $('.menu-item').removeClass('active');
  // 第二步：给当前点击的菜单项添加选中类
  $(this).addClass('active');
});

代码说明 #

1. 给所有菜单项统一加了.menu-item类，这样能一次性选中所有菜单元素，方便批量操作。
2. 点击事件里，先通过removeClass('active')清除所有菜单的选中状态，再用$(this).addClass('active')给当前点击的菜单加上选中类，确保只有当前项是绿色选中状态。
3. 如果你的原类名和示例不同，只需要把active换成你自己的类名（比如你原来的menu），同时对应调整CSS样式即可。

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