如何在页面刷新后保留Bootstrap 5标签页（Tab）的激活状态

要实现页面刷新后保留当前激活的标签页状态，核心思路是用localStorage持久化存储激活标签的标识，页面加载时读取并恢复状态。以下是具体实现方案：

完整代码示例 #

<ul class="nav nav-pills" id="my_tabs">
   <li class="nav-item" role="presentation"> 
     <a class="nav-link active" data-bs-toggle="pill" href="#tab1" aria-selected="true">Tab 1</a> 
   </li>
   <li class="nav-item" role="presentation"> 
     <a class="nav-link" data-bs-toggle="pill" href="#tab2" aria-selected="false">Tab 2</a> 
   </li>
</ul>
      
<section class="tab-content" id="tab-content">
   <div class="tab-pane active" id="tab1" role="tabpanel">
     Tab 1
   </div>
   <div class="tab-pane" id="tab2" role="tabpanel">
     Tab 2
   </div>
</section>

<script>
// 监听标签切换事件，保存当前激活标签到localStorage
document.getElementById('my_tabs').addEventListener('show.bs.tab', function(e) {
  localStorage.setItem('activeTab', e.target.getAttribute('href'));
});

// 页面加载时恢复之前的激活标签
window.addEventListener('load', function() {
  const savedTab = localStorage.getItem('activeTab');
  if (savedTab) {
    // 使用Bootstrap的Tab API激活目标标签，自动处理状态切换
    const targetTab = new bootstrap.Tab(document.querySelector(`#my_tabs a[href="${savedTab}"]`));
    targetTab.show();
  }
});
</script>

代码说明 #

1. 存储激活状态：监听Bootstrap标签的show.bs.tab事件（标签切换前触发），将当前要激活的标签的href值存入localStorage，这个值对应标签内容面板的ID。
2. 恢复激活状态：页面加载完成后，从localStorage中读取保存的标签ID，通过Bootstrap的Tab实例调用show()方法，自动激活对应的标签和内容面板，同时会正确更新active类和aria-selected属性，保证可访问性。

如果需要兼容没有localStorage的环境，可以添加简单的判断，但现代浏览器基本都支持该特性。

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