通过 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）。

? 完整示例代码

  <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>

• Tab 1
• Tab 2

内容区域 1

这是 Tab 1 的内容。刷新页面后，若此前在此 Tab，将自动恢复显示。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

内容区域 2

这是 Tab 2 的内容。切换后刷新，状态依然保留。

<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>

⚠️ 注意事项

• 协议限制：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 密集型管理界面。