页面刷新后保持Tab激活及通过URL哈希访问的实现方案

云原生阿岚

2026-7-21

Bootstrap标签页状态保存与哈希访问实现方案

一、页面刷新后保存激活的Tab状态

借助localStorage持久化当前激活的Tab状态，实现步骤如下：

监听Tab切换的show.bs.tab事件，切换时将当前激活Tab对应的Pane ID存入localStorage
页面加载完成后，读取localStorage中存储的ID，若存在则激活对应的Tab

二、通过URL哈希直接访问对应Tab

结合URL哈希实现直接跳转指定Tab，同时切换Tab时更新哈希值，实现步骤如下：

页面加载时检查URL的哈希值，若哈希对应某个TabPane的ID，则激活对应的Tab
切换Tab时，将当前TabPane的ID设置为URL哈希，方便分享或直接访问

完整实现代码

在现有HTML代码末尾添加以下JavaScript代码：

// 获取Tab容器实例
const tabEl = document.getElementById('myTab');

// 页面加载时恢复状态或处理URL哈希
document.addEventListener('DOMContentLoaded', function() {
  // 优先处理URL哈希
  const hash = window.location.hash;
  if (hash && document.querySelector(hash)) {
    const tabButton = document.querySelector(`[data-bs-target="${hash}"]`);
    if (tabButton) {
      new bootstrap.Tab(tabButton).show();
    }
  } else {
    // 从localStorage恢复上次激活的Tab
    const activeTab = localStorage.getItem('activeTab');
    if (activeTab) {
      const tabButton = document.querySelector(`[data-bs-target="${activeTab}"]`);
      if (tabButton) {
        new bootstrap.Tab(tabButton).show();
      }
    }
  }
});

// 监听Tab切换事件，同步保存状态与URL哈希
tabEl.addEventListener('show.bs.tab', function(e) {
  const targetPaneId = e.target.getAttribute('data-bs-target');
  // 保存到localStorage
  localStorage.setItem('activeTab', targetPaneId);
  // 更新URL哈希
  window.location.hash = targetPaneId;
});