Twitter Bootstrap 5 选项卡：在页面重新加载或超链接时转到特定选项卡答案

【问题标题】：Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or HyperlinkTwitter Bootstrap 5 选项卡：在页面重新加载或超链接时转到特定选项卡
【发布时间】：2021-10-14 15:29:28
【问题描述】：

你怎么能像以前的引导方法一样直接链接到引导 5 选项卡？：

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

我尝试了以下方法：

var hash = location.hash.replace(/^#/, ""); // ^ means starting, meaning only match the first hash
if (hash) {
  var someTabTriggerEl = document.querySelector("#" + hash + "");
  var tab = new bootstrap.Tab(someTabTriggerEl);

  tab.show();
}

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

假设选项卡触发器来自<ul> 列表，并且查询字符串哈希是href 中的目标，那么在页面加载时显示选项卡的 Bootstrap 5 方法是：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#someTarget">Some Target</a>
  </li>
</ul>

document.addEventListener("DOMContentLoaded", () => {
  const trigger = document.querySelector(`ul.nav a[href="${window.location.hash}"]`)
  const tab = new bootstrap.Tab(trigger)
  tab.show()
})

上面不检查无效的查询字符串哈希名称或有效的dom元素；根据需要添加。

【讨论】：

修正错别字后效果很好。 addEventListner 和 boostrap
@JustOneMoreQuestion - 很好；已更新。

【解决方案2】：

目前解决了这个问题：

var hash = location.hash.replace(/^#/, "");
if (hash) {
  var triggerEl = document.querySelector("#" + hash + "-tab");
  triggerEl.click();
}

【讨论】：