JavaScript实现的Tab标签页异常：点击反向显示且首次点击无响应

问题现象 #

• 点击Tab 1时显示Tabpanel 2，点击Tab 2时显示Tabpanel 1，关联逻辑完全反向
• 首次点击标签页无响应，后续点击才出现上述反向问题

错误原因分析 #

1. 冗余判断导致首次点击无响应
   初始选中的Tab（Tab 1）已通过CSS设置pointer-events: none，本就不会触发点击事件，但代码中额外添加了判断分支：当tab.ariaSelected === "true"且关联关系正确时不执行任何操作，若样式未生效，首次点击选中Tab会直接无响应。

2. Tabpanel显示/隐藏逻辑完全反向

   • 代码错误地将原本隐藏的Tabpanel设置为显示，同时把当前点击Tab对应的目标Tabpanel设置为隐藏，直接导致关联逻辑反向。
   • 使用map遍历selectedTabs和hiddenTabpanels的索引对应逻辑不合理，两者数量不一定始终匹配，容易引发状态同步错误。

3. 状态关联逻辑混乱
   未建立Tab选中状态与对应Tabpanel显示状态的直接关联，而是错误操作了无关的面板元素。

修复后的代码 #

HTML（无需修改） #

<ul role="tablist">
  <li role="presentation">
    <a href="#" id="tab-1" role="tab" aria-selected="true">Tab 1</a>
  </li>

  <li role="presentation">
    <a href="#" id="tab-2" role="tab" aria-selected="false">Tab 2</a>
  </li>
</ul>

<div class="container">
  <ul role="tabpanel" aria-labelledby="tab-1">
    <h1>Tabpanel 1</h1>
  </ul>
  <ul role="tabpanel" aria-labelledby="tab-2" hidden>
    <h1>Tabpanel 2</h1>
  </ul>
</div>

CSS（无需修改） #

[role='tab'][aria-selected='true'] {
  color: white;
  pointer-events: none;
  background-color: green;
}

JavaScript（修复后） #

const tabs = Array.from(document.querySelectorAll("[role='tab']"));
const tabpanels = Array.from(document.querySelectorAll("[role='tabpanel']"));

tabs.forEach((tab) => {
  tab.addEventListener("click", (event) => {
    event.preventDefault();

    // 重置所有Tab的选中状态
    tabs.forEach(item => item.ariaSelected = "false");
    // 隐藏所有Tabpanel
    tabpanels.forEach(panel => panel.hidden = true);

    // 设置当前Tab为选中状态
    tab.ariaSelected = "true";
    // 找到并显示当前Tab对应的Tabpanel
    const targetPanel = tabpanels.find(panel => panel.getAttribute("aria-labelledby") === tab.id);
    if (targetPanel) {
      targetPanel.hidden = false;
    }
  });
});

修复说明 #

• 移除冗余的判断逻辑，简化代码执行流程
• 统一先重置所有Tab和Tabpanel的状态，再单独设置当前选中项和对应面板的状态，逻辑更清晰不易出错
• 使用find方法通过aria-labelledby属性精准匹配Tab对应的Tabpanel，彻底避免索引对应错误
• 建立Tab选中状态与Tabpanel显示状态的直接关联，解决反向问题

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