通过 javascript 结合 localstorage 持久化记录当前激活的 tab id，页面加载时自动恢复上次选中的标签页，从而实现刷新不丢失状态。
通过 javascript 结合 localstorage 持久化记录当前激活的 tab id，页面加载时自动恢复上次选中的标签页，从而实现刷新不丢失状态。
在 Bootstrap 5 中，原生 Tab 组件默认不支持跨刷新维持激活状态——每次页面重载都会回到初始（如 #tab1）标签页。要解决这一问题，需绕过纯 HTML 的 data-bs-toggle 声明式初始化，改用 JavaScript 主动控制 Tab 切换，并利用 localStorage 持久化用户选择。
✅ 实现原理
- 监听点击：为每个 Tab 触发链接绑定 click 事件，调用 bootstrap.Tab.show() 手动激活；
- 持久存储：点击时将目标 Tab 的 href 值（如 #tab2）存入 localStorage；
- 启动恢复：页面首次加载时读取 localStorage 中的值，若存在则触发对应 Tab 的点击；否则回退至默认 Tab（如 #tab1）。
? 完整示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 5 Tab 状态持久化</title>
</head>
<body class="p-4">
<ul class="nav nav-pills mb-3" id="my_tabs">
<li class="nav-item" role="presentation">
<a class="nav-link" href="#tab1" role="tab">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#tab2" role="tab">Tab 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane p-3 border rounded" id="tab1" role="tabpanel">
<h5>内容区域 1</h5>
<p>这是 Tab 1 的内容。刷新页面后，若此前在此 Tab，将自动恢复显示。</p>
</div>
<div class="tab-pane p-3 border rounded" id="tab2" role="tabpanel">
<h5>内容区域 2</h5>
<p>这是 Tab 2 的内容。切换后刷新，状态依然保留。</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 获取所有 Tab 触发链接
const triggerTabList = document.querySelectorAll('#my_tabs a');
// 初始化每个 Tab 实例并绑定点击逻辑
triggerTabList.forEach(triggerEl => {
const tab = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener('click', event => {
event.preventDefault();
tab.show();
// 存储当前激活的 Tab 锚点（如 #tab2）
localStorage.setItem('active-tab', event.target.getAttribute('href'));
});
});
// 页面加载时恢复上一次激活的 Tab
const savedTab = localStorage.getItem('active-tab');
const targetTabLink = [...triggerTabList].find(el => el.getAttribute('href') === savedTab);
if (targetTabLink) {
targetTabLink.click(); // 触发激活
} else {
// 默认激活第一个 Tab（确保有 fallback）
triggerTabList[0]?.click();
}
</script>
</body>
</html>⚠️ 注意事项
- 协议限制：localStorage 在 file:// 协议下不可用（如直接双击打开 HTML 文件），请使用本地服务器（如 VS Code Live Server、python -m http.server）测试；
- ID 唯一性：确保 href 值与对应 .tab-pane 的 id 完全一致（含 # 符号）；
- 无障碍兼容：代码中保留了 role="tab" 和语义化结构，不影响屏幕阅读器支持；
- 清理策略（可选）：如需重置状态，可通过 localStorage.removeItem('active-tab') 或提供“重置”按钮。
✅ 总结
该方案轻量、可靠，不依赖额外库，完全契合 Bootstrap 5 官方 API 设计。它将用户交互状态从内存提升至持久化层面，显著提升单页应用（SPA）风格体验——尤其适用于仪表盘、配置中心等多 Tab 密集型管理界面。
