Bootstrap 4：从标签页内部通过二级链接打开目标标签页

没问题，这个需求完全可以实现！Bootstrap 4的标签页组件虽然默认是通过顶部导航栏切换，但我们可以在标签内容内部添加链接来触发其他标签的切换，主要有两种靠谱的方式：

其实Bootstrap的tab插件并不限制触发元素必须在导航栏里——只要你的链接带有data-toggle="tab"（如果是pill样式就用data-toggle="pill"），并且href指向目标标签面板的ID，就能直接触发切换，还会自动同步顶部导航栏的选中状态。

给你一个完整的示例代码：

<!-- 顶部标签导航 -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home（第一个标签）</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact（第三个标签）</a>
  </li>
</ul>

<!-- 标签内容区域 -->
<div class="tab-content" id="myTabContent">
  <!-- 第一个标签的内容面板 -->
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p>这是第一个标签的内容，点击这里直接打开<a href="#contact" data-toggle="tab">第三个标签Contact</a></p>
  </div>
  <!-- 第二个标签的内容面板 -->
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>Profile标签的内容</p>
  </div>
  <!-- 第三个标签的内容面板 -->
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p>Contact标签的内容，成功打开啦！</p>
  </div>
</div>

如果这个方法对你不生效，大概率是这两个问题：

• 标签面板的ID和链接的href不匹配，一定要完全一致
• 没正确引入依赖：Bootstrap 4的tab组件需要jQuery和Bootstrap JS文件，顺序要先引入jQuery，再引入Bootstrap JS

如果你的链接是动态生成的，或者需要加一些自定义逻辑（比如切换前做验证），可以手动调用Bootstrap的tab方法来触发切换。

比如先给内部链接加个标识：

<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <p>点击这里打开<a href="#" class="switch-to-third-tab">第三个标签</a></p>
</div>

然后写JS代码：

// 监听链接点击事件
$('.switch-to-third-tab').on('click', function(e) {
  e.preventDefault(); // 阻止默认的锚点跳转
  // 手动触发第三个标签的切换
  $('#contact-tab').tab('show');
});

这里#contact-tab是顶部导航栏里第三个标签的ID，调用tab('show')方法后，就会自动切换到对应的标签面板，同时更新导航栏的选中状态。

如果是动态生成的链接，记得用事件委托来绑定：

$(document).on('click', '.switch-to-third-tab', function(e) {
  e.preventDefault();
  $('#contact-tab').tab('show');
});

这样哪怕链接是后来通过JS添加的，也能正常触发切换。

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