点击tab后如何修改<li>元素的class并移除侧边栏历史元素的active类

你当前的代码仅实现了给目标元素添加active类的逻辑，没有移除其他侧边栏元素已有的active类，所以会出现多个元素同时处于激活状态的问题。

注意你原代码里的sidebar-item如果是类名，需要在前面加.作为类选择器标识，修正后的可直接运行的代码如下：

$(".setActive").click(function() {
  // 先清除所有侧边栏元素的active类
  $(".sidebar-item").parent().parent().removeClass('active');
  // 给当前匹配的目标元素添加active类
  $(".sidebar-item:contains('"+$(this).attr("data-target")+"')").parent().parent().addClass('active');
})

优化建议 #

可以做两点调整提升代码的稳定性和可维护性：

1. 替换parent().parent()为closest()方法，直接向上查找你要加active类的目标元素的公共类，避免后续DOM层级调整导致代码失效
2. 用jQuery内置的data()方法获取data-*属性，写法更简洁规范

假设你需要加active类的侧边栏元素有公共类sidebar-menu-node，优化后的代码如下：

$(".setActive").click(function() {
  const target = $(this).data("target");
  // 直接通过公共类清除所有激活状态
  $(".sidebar-menu-node").removeClass('active');
  // 匹配目标后向上查找对应元素加激活类
  $(".sidebar-item:contains('"+ target +"')").closest('.sidebar-menu-node').addClass('active');
})

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