Bootstrap 5 Deep linking实现URL哈希自动打开对应标签页问题问询

你可以直接在页面中插入以下JavaScript代码即可实现需求：

document.addEventListener('DOMContentLoaded', function () {
  // 页面加载时读取URL hash并打开对应标签页
  if (window.location.hash) {
    const targetTab = document.querySelector(`button[data-bs-target="${window.location.hash}"]`);
    if (targetTab) {
      const tab = new bootstrap.Tab(targetTab);
      tab.show();
    }
  }

  // 切换标签时自动更新URL hash，方便用户复制分享链接
  const allTabTriggers = document.querySelectorAll('button[data-bs-toggle="tab"]');
  allTabTriggers.forEach(trigger => {
    trigger.addEventListener('shown.bs.tab', function (e) {
      const targetId = e.target.getAttribute('data-bs-target');
      history.pushState(null, '', targetId);
    });
  });
});

适配示例URL的补充调整 #

如果你需要匹配你给出的示例链接example.com/page#vehicle-finance-calc，只需要同步修改对应标签按钮的data-bs-target属性、以及对应内容面板的id即可：

<!-- 标签按钮调整 -->
<button class="nav-link" id="nav-finance-calc-tab" data-bs-toggle="tab" data-bs-target="#vehicle-finance-calc" type="button" role="tab" aria-controls="vehicle-finance-calc" aria-selected="false">Finance Calculator</button>

<!-- 对应的内容面板同步调整id -->
<div class="tab-pane fade" id="vehicle-finance-calc" role="tabpanel" aria-labelledby="nav-finance-calc-tab">
  计算器内容区域
</div>

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