如何在Bootstrap中制作可正常切换内容的Nav Tabs导航选项卡

Bootstrap导航标签切换失效修复方案 #

1. 匹配Bootstrap版本的属性与依赖 #

Bootstrap不同版本的标签切换属性和依赖要求不一样，根据你使用的版本对应调整：

• Bootstrap 4版本
  你现有代码里的data-toggle="tab"属性是正确的，只需要按顺序引入以下依赖即可：

  <!-- 放在body标签末尾 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
  

• Bootstrap 5版本
  Bootstrap 5把原data-toggle属性重命名为data-bs-toggle，你需要先修改导航链接的属性：

  <ul class="secondary-menu-list nav nav-tabs">
      <li class="nav-item secondary-menu-item active"><a href="#about" data-bs-toggle="tab" id="about-tab" role="tab" aria-controls="about" aria-selected="true" class="secondary-menu-link menu-link active">About 1</a></li>
      <li class="nav-item secondary-menu-item"><a href="#about2" data-bs-toggle="tab" id="about2-tab" role="tab" aria-controls="about2" aria-selected="false" class="secondary-menu-link menu-link">About 2</a></li>
  </ul>
  

  然后引入Bootstrap 5的JS依赖：

  <!-- 放在body标签末尾 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

2. 确认结构匹配 #

你现有的内容部分结构是完全正确的：导航链接的href值和对应tab-pane的id一致，aria-labelledby属性也和导航链接的id对应，这部分不需要改动。

3. 排除冲突 #

如果调整后仍无法切换，检查你自定义的JS代码中是否有阻止a标签默认跳转、或者给导航元素绑定了冲突事件的逻辑，临时注释相关代码测试即可定位问题。

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