通过URL哈希跳转Bootstrap Tab指定面板不生效如何解决？

Bootstrap 标签页组件默认仅响应点击切换逻辑，不会主动读取URL地址栏的哈希值匹配对应标签，添加以下JS代码即可实现需求：

原生JS版本（适配Bootstrap 5） #

document.addEventListener('DOMContentLoaded', function () {
  // 读取当前URL的哈希值
  const currentHash = window.location.hash;
  // 校验是否存在对应标签页
  if (currentHash && document.querySelector(`.nav-tabs a[href="${currentHash}"]`)) {
    // 激活对应标签页
    const targetTab = new bootstrap.Tab(document.querySelector(`.nav-tabs a[href="${currentHash}"]`));
    targetTab.show();
  }

  // 可选配置：监听哈希变化，支持页内跳转标签时自动切换
  window.addEventListener('hashchange', function () {
    const newHash = window.location.hash;
    if (newHash && document.querySelector(`.nav-tabs a[href="${newHash}"]`)) {
      const newTargetTab = new bootstrap.Tab(document.querySelector(`.nav-tabs a[href="${newHash}"]`));
      newTargetTab.show();
    }
  });
});

jQuery版本（适配Bootstrap 3/4/5，需提前引入jQuery） #

$(function () {
  const currentHash = window.location.hash;
  if (currentHash) {
    $(`.nav-tabs a[href="${currentHash}"]`).tab('show');
  }

  // 可选配置：监听哈希变化，支持页内跳转标签时自动切换
  $(window).on('hashchange', function () {
    const newHash = window.location.hash;
    if (newHash) {
      $(`.nav-tabs a[href="${newHash}"]`).tab('show');
    }
  });
});

注意事项 #

• JS代码需要放在Bootstrap核心JS文件加载完成之后执行，避免出现方法未定义的报错
• 原有标签页的结构无需调整，只要保证标签触发链接的href属性值和跳转链接的哈希值完全匹配即可，你提供的代码中#loctn已经符合匹配要求

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