使用原生JavaScript实现嵌套标签页并修复内容消失问题

嘿，我完全懂你的痛点——点击POP里的子标签时，整个POP内容都不见了，这是因为你的原openTab函数会把页面上所有.tabcontent元素都隐藏，包括父级的POP标签页本身。咱们来调整一下函数逻辑，让它只处理当前点击的标签所在的标签组对应的内容，这样父标签就不会被误关闭了。

问题根源 #

原函数里的document.getElementsByClassName("tabcontent")会获取全局所有的标签内容元素，所以当你点击子标签时，父级的#pop（它也是.tabcontent类）会被设置为display:none，自然就看不到了。

修改后的解决方案 #

我们需要让函数只操作当前标签组内的内容，具体来说：

1. 找到当前点击按钮所属的.tab容器
2. 只隐藏该容器所在父元素下的.tabcontent
3. 只更新该容器内的.tablinks的激活状态

修改后的JavaScript代码：

function openTab(evt, tabName) {
  // 获取当前点击按钮所在的标签组容器
  const currentTabContainer = evt.currentTarget.closest('.tab');
  // 获取当前标签组所在父元素下的所有标签内容
  const tabContents = currentTabContainer.parentElement.querySelectorAll('.tabcontent');
  
  // 隐藏当前组内的所有标签内容
  tabContents.forEach(content => {
    content.style.display = 'none';
  });
  
  // 移除当前组内所有标签按钮的激活状态
  const tabLinks = currentTabContainer.querySelectorAll('.tablinks');
  tabLinks.forEach(link => {
    link.classList.remove('active');
  });
  
  // 显示目标标签内容，并给当前按钮添加激活状态
  document.getElementById(tabName).style.display = 'block';
  evt.currentTarget.classList.add('active');
}

调整HTML默认状态（可选但推荐） #

为了页面加载时默认显示第一个标签内容，需要给默认激活的按钮加上active类，并让对应的内容显示：

<div class="tab">
  <!-- 父级第一个按钮添加active类 -->
  <button class="tablinks active" onclick="openTab(event, 'bla')">bla</button>
  <button class="tablinks" onclick="openTab(event, 'blabla')">blabla</button>
  <button class="tablinks" onclick="openTab(event, 'pop')">POP</button>
</div>
<!-- 默认显示bla内容 -->
<div id="bla" class="tabcontent" style="display:block">
  <h2>bla</h2>
  <table>
    <tr>
      <td>My stuff that works :)</td>
    </tr>
  </table>
</div>
<div id="blabla" class="tabcontent">
  <h3>blabla</h3>
  <table>
    <tr>
      <td>My stuff that works ;)</td>
    </tr>
  </table>
</div>
<div id="pop" class="tabcontent">
  <h1>POP</h1>
  <div class="tab">
    <!-- 子级第一个按钮添加active类 -->
    <button class="tablinks active" onclick="openTab(event, 'doel1')">Doel 1</button>
    <button class="tablinks" onclick="openTab(event, 'doel2')">Doel 2</button>
    <button class="tablinks" onclick="openTab(event, 'doel3')">Doel 3</button>
  </div>
  <!-- 默认显示doel1内容 -->
  <div id="doel1" class="tabcontent" style="display:block">
    My stuff that doesn't show when I want :( Now it works!
  </div>
  <!-- 补充doel2和doel3的内容 -->
  <div id="doel2" class="tabcontent">
    Content for Doel 2 here
  </div>
  <div id="doel3" class="tabcontent">
    Content for Doel 3 here
  </div>
</div>

CSS部分可以保持不变，因为样式逻辑没问题。

为什么这个修改有效？ #

• closest('.tab')精准定位到当前按钮所在的标签组，区分开父标签组和子标签组
• parentElement.querySelectorAll('.tabcontent')只获取当前标签组所在父元素内的内容，不会影响其他层级的标签页
• 使用classList来管理激活状态，比字符串替换更安全可靠，避免重复添加active类的问题

现在点击POP里的子标签时，POP标签页会保持激活状态，子内容也能正常切换啦！

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