Bootstrap标签页异常：tab1内容在其他标签页中显示

嘿，我帮你排查出了几个导致标签页内容重叠的关键问题，咱们一步步来修复：

问题根源拆解 #

• 外层标签内容容器未包含所有面板
  你原本的代码里，外层的tab-content只包裹了tab1的内容，tab2和tab3的面板都在这个容器外面。Bootstrap的标签页组件是通过tab-content来管理下属tab-pane的显示隐藏的，不在这个容器内的面板不会被切换逻辑控制，所以切换到tab2/tab3时，tab1的内容会一直显示，和新标签页内容重叠。

• 重复ID干扰组件逻辑
  HTML要求ID必须唯一，但你多次使用了myTabContent这个ID，还有tab3的导航链接ID和对应面板ID重复（都是tab3-1），这会让Bootstrap的JS无法正确识别对应元素，导致功能异常。

• 子标签面板错误添加show类
  子标签页里多个tab-pane都加了show类，这会让它们同时显示，正确的做法是只有当前激活的面板才有show active类，其他面板只保留fade类。

修复后的完整代码 #

<ul class="nav nav-pills" role="tablist">
  <li class="">
    <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab1</span>
    </a>
  </li>
  <li>
    <a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab2</span>
    </a>
  </li>
  <li>
    <a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
      <span class="d-lg-inline-block">tab3</span>
    </a>
  </li>
</ul>
<!-- 外层标签内容容器，包含所有顶级标签面板 -->
<div class="tab-content bg-white" id="mainTabContent">
  <div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    tab1
  </div>
  <div class="tab-pane clearfix fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
    tab2
    <div class="d-flex mb-3">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link active border" href="#tab2-1" data-toggle="tab" role="tab">tab2-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link border" href="#tab2-2" data-toggle="tab" role="tab">tab2-2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link border" href="#tab2-3" data-toggle="tab" role="tab">tab2-3</a>
        </li>
      </ul>
    </div>
    <!-- 子标签内容容器，使用唯一ID -->
    <div class="tab-content bg-white" id="tab2SubContent">
      <div class="tab-pane fade active show clearfix" id="tab2-1" role="tabpanel" aria-labelledby="tab2-1-tab">
        tab2-1
      </div>
      <div class="tab-pane fade clearfix" id="tab2-2" role="tabpanel" aria-labelledby="tab2-2-tab">
        tab 2-2
      </div>
      <div class="tab-pane fade clearfix" id="tab2-3" role="tabpanel" aria-labelledby="tab2-3-tab">
        tab2-3
      </div>
    </div>
  </div>
  <div class="tab-pane clearfix fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
    tab 3
    <div class="d-flex mb-3">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <!-- 导航链接使用唯一ID，避免和面板ID重复 -->
          <a class="nav-link active border" id="tab3-1-link" href="#tab3-1" data-toggle="tab" role="tab">tab 3-1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link border" id="tab3-2-link" href="#tab3-2" data-toggle="tab" role="tab">tab 3-2</a>
        </li>
      </ul>
    </div>
    <!-- 子标签内容容器，使用唯一ID -->
    <div class="tab-content bg-white" id="tab3SubContent">
      <div class="tab-pane fade show active clearfix" id="tab3-1" role="tabpanel" aria-labelledby="tab3-1-link">
        tab3-1
      </div>
      <div class="tab-pane fade clearfix" id="tab3-2" role="tabpanel" aria-labelledby="tab3-2-link">
        tab3-2
      </div>
    </div>
  </div>
</div>

额外调整说明 #

• 移除了顶级标签里的disabled类（如果需要禁用标签页，可再重新添加）
• 给所有aria-labelledby属性设置了对应的导航链接ID，提升页面可访问性
• 每个tab-content都使用了唯一ID，彻底避免元素冲突

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