Bootstrap 4 实现通过链接直接跳转至指定标签页

别担心，Bootstrap 4的标签页其实支持通过URL哈希直接跳转，只需要加一点点超简单的JavaScript代码（不用你理解，直接复制粘贴就行），下面是具体的解决方案：

为什么直接用<a>标签跳ID无效？ #

Bootstrap的标签页切换是靠JavaScript控制激活状态和内容显示的，单纯的锚点跳转（比如#pills-profile）只会让页面滚动到对应元素，但不会触发Bootstrap的标签切换逻辑，所以标签页不会切换。

解决方案步骤 #

1. 保留你现有的标签页代码 #

你原来的标签页代码完全没问题，不需要修改。

2. 添加触发标签切换的链接 #

你可以在页面任意位置添加这类跳转链接，比如：

<!-- 示例：跳转到Profile标签页 -->
<a href="#pills-profile">直接打开Profile标签页</a>
<!-- 示例：跳转到Contact标签页 -->
<a href="#pills-contact">直接打开Contact标签页</a>

3. 添加一段极简的JavaScript代码 #

把这段代码放在页面的<script>标签里（建议放在Bootstrap JS脚本的后面），它会自动处理URL哈希，帮你激活对应的标签页：

// 页面加载时检查URL哈希，激活对应标签页
$(document).ready(function() {
  if (window.location.hash) {
    const tabId = window.location.hash;
    // 触发Bootstrap的标签切换
    $('.nav-link[href="' + tabId + '"]').tab('show');
  }
  
  // 点击页面内的跳转链接时，同步切换标签页并更新URL哈希
  $('a[href^="#pills-"]').click(function(e) {
    e.preventDefault();
    const tabId = $(this).attr('href');
    $('.nav-link[href="' + tabId + '"]').tab('show');
    window.location.hash = tabId;
  });
});

完整示例代码 #

把所有内容整合起来就是这样：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<!-- 跳转链接示例 -->
<div class="mb-3">
  <a href="#pills-profile">直接打开Profile标签页</a> | 
  <a href="#pills-contact">直接打开Contact标签页</a>
</div>

<!-- 原始标签页代码 -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item" id="mdr">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">TAB 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">TAB TWO</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Three TABS</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<!-- 新增的JS代码 -->
<script>
$(document).ready(function() {
  if (window.location.hash) {
    const tabId = window.location.hash;
    $('.nav-link[href="' + tabId + '"]').tab('show');
  }
  
  $('a[href^="#pills-"]').click(function(e) {
    e.preventDefault();
    const tabId = $(this).attr('href');
    $('.nav-link[href="' + tabId + '"]').tab('show');
    window.location.hash = tabId;
  });
});
</script>

现在不管是点击页面内的跳转链接，还是直接在URL里输入http://你的页面地址#pills-profile，都能直接跳转到对应的标签页啦！

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