如何在页面刷新时保持Bootstrap 5选中标签页的激活状态

核心实现思路 #

• 监听Bootstrap 5原生的标签切换事件，每次切换成功后将当前激活标签的目标ID存入localStorage本地存储
• 页面DOM加载完成后读取本地存储的目标ID，若存在则手动触发对应标签的激活逻辑，不存在则保留默认激活标签

旧版本方案失效原因 #

Bootstrap 5重构了标签组件的事件名、实例调用方式，Bootstrap 3/4的调用方法如果没有额外引入jQuery适配层，在原生JS环境下无法直接使用，必须使用Bootstrap 5官方提供的原生实例API。

可直接运行的实现代码 #

原有HTML结构无需修改，加入以下JS代码即可生效：

document.addEventListener('DOMContentLoaded', function () {
  // 本地存储key，可自定义，多标签组场景下可设置不同key区分
  const ACTIVE_TAB_KEY = 'bs5_active_tab'
  const allTabTriggers = document.querySelectorAll('#myTab .nav-link')

  // 页面加载时读取存储的激活标签，触发激活
  const savedTabTarget = localStorage.getItem(ACTIVE_TAB_KEY)
  if (savedTabTarget) {
    const targetTrigger = document.querySelector(`[data-bs-target="${savedTabTarget}"]`)
    if (targetTrigger) {
      // 调用Bootstrap5原生Tab实例激活标签
      const activeTab = new bootstrap.Tab(targetTrigger)
      activeTab.show()
    }
  }

  // 监听标签切换事件，存储最新激活的标签目标
  allTabTriggers.forEach(trigger => {
    trigger.addEventListener('shown.bs.tab', function (e) {
      const currentTarget = e.target.getAttribute('data-bs-target')
      localStorage.setItem(ACTIVE_TAB_KEY, currentTarget)
    })
  })
})

适配说明 #

如果项目通过ES模块导入Bootstrap，需要提前导入Tab组件：import { Tab } from 'bootstrap'，替换代码中的bootstrap.Tab为Tab即可。

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