JS新手如何实现点击一组Tab时同步选中另一组对应Tab

实现代码 #

直接将以下代码插入到页面的script标签中即可实现双向Tab同步效果，无需修改现有HTML结构：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有Tab标题元素
  const tabHeaders = document.querySelectorAll('.plus-tab-header');
  tabHeaders.forEach(header => {
    header.addEventListener('click', () => {
      // 读取当前点击Tab的序号
      const tabIndex = header.dataset.tab;
      // 匹配两个Tab组中同序号的所有Tab
      const matchedTabs = document.querySelectorAll(`.plus-tab-header[data-tab="${tabIndex}"]`);
      matchedTabs.forEach(tab => {
        // 跳过当前已点击的元素，触发另一组对应Tab的点击事件
        if (tab !== header) tab.click();
      });
    });
  });
});

逻辑说明 #

• 双向同步：点击任意一组的Tab，另一组都会自动切换到对应标签
• 兼容现有组件逻辑：直接触发对应Tab的原生点击事件，复用你现有Tab组件的激活、内容切换逻辑，不需要手动修改active/inactive类名
• 适配性强：后续如果新增Tab项，只要两个组的data-tab值对应，不需要修改JS代码就能自动支持同步

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