点击tab标签项时显示多个相同类名关联容器的jQuery实现问题

原有代码问题排查 #

• 类名拼写不匹配：HTML中tab外层类是horisontal-tabs，你写的jQuery选择器用了horizontal-tabs，导致点击事件根本没有绑定成功
• 逻辑冲突：你先给.container-sam加了section-visible，下一行代码又把所有带section-visible的元素改成了section-hidden，等于操作直接抵消
• 代码冗余：不需要给每个人员单独写点击事件，统一绑定即可大幅简化代码

完整实现代码 #

// 统一给所有tab标签绑定点击事件
$('.horisontal-tabs ul.tabs li.tab-label').click(function (event) {
  event.stopPropagation();
  // 1. 提取当前点击的人员标识，从person-xxx类中截取xxx部分
  const personKey = Array.from(this.classList).find(cls => cls.startsWith('person-')).replace('person-', '');
  // 2. 切换tab的active状态
  $('.horisontal-tabs ul.tabs li.tab-label').removeClass('active');
  $(this).addClass('active');
  // 3. 先隐藏所有人员对应的容器
  $('[class*="container-"]').removeClass('section-visible').addClass('section-hidden');
  // 4. 仅显示当前点击人员对应的所有容器
  $(`.container-${personKey}`).removeClass('section-hidden').addClass('section-visible');
});

补充说明 #

请确保你的CSS中两个控制显隐的类定义正确，示例：

.section-hidden {
  display: none !important;
}
.section-visible {
  display: block !important;
}

后续新增人员时，只需要按照现有规则添加person-xxx类的tab、container-xxx类的内容容器即可，不需要修改JS代码，可维护性更高。

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