Bootstrap 5 Tabs：页面重载或点击超链接时跳转至指定标签页实现

当前实现存在的可优化问题 #

• 没有监听DOM加载完成事件就执行元素查询，若脚本放在DOM渲染完成前执行，会找不到对应元素触发报错
• 未校验获取到的元素是否为合法的Bootstrap 5 Tab触发器，若hash对应普通DOM元素，调用new bootstrap.Tab()会抛出异常
• 仅处理了页面初始化时的hash读取，未监听hashchange事件，无法响应页面加载后点击带hash锚点的切换需求
• 未对hash值做CSS选择器转义，若hash包含.、[]等CSS特殊字符，会导致querySelector查询失败
• 存在冗余写法，document.querySelector("#" + hash + "")末尾的空字符串拼接无实际作用

更规范的实现方案 #

// 封装按hash切换标签的通用逻辑
function switchTabByHash() {
  if (!location.hash) return
  // 移除#前缀，同时转义CSS选择器特殊字符，避免查询异常
  const tabId = CSS.escape(location.hash.slice(1))
  // 限定只匹配带Tab触发器属性的元素，避免误匹配普通元素
  const tabTrigger = document.querySelector(`#${tabId}[data-bs-toggle="tab"]`)
  
  if (tabTrigger) {
    const tab = new bootstrap.Tab(tabTrigger)
    tab.show()
    // 可选：删除下行则保留hash默认滚动到对应元素位置的原生行为
    window.scrollTo(0, 0)
  }
}

// 页面DOM加载完成后执行首次标签切换
document.addEventListener('DOMContentLoaded', switchTabByHash)
// 监听hash变化，响应页面运行时的锚点跳转需求
window.addEventListener('hashchange', switchTabByHash)

使用说明：确保你的标签页触发器元素同时配置了对应hash的id属性和data-bs-toggle="tab"属性即可。

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