Bootstrap 5中如何用JavaScript实现刷新后保持选中的Nav Pills激活状态？

以下是经过验证的可行方案，核心是利用 Bootstrap 5 的 Tab 事件与 localStorage 配合，确保页面刷新后能恢复之前选中的标签页：

标准 HTML 结构 #

确保导航和内容面板符合 Bootstrap 5 的规范：

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-selected="true">首页</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-selected="false">个人资料</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-messages-tab" data-bs-toggle="pill" data-bs-target="#pills-messages" type="button" role="tab" aria-selected="false">消息</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel">首页内容区域</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel">个人资料内容区域</div>
  <div class="tab-pane fade" id="pills-messages" role="tabpanel">消息内容区域</div>
</div>

功能实现 JavaScript 代码 #

// 页面加载完成后恢复上次选中的标签
document.addEventListener('DOMContentLoaded', function() {
  const savedTabId = localStorage.getItem('activePillTab');
  if (savedTabId) {
    // 使用 Bootstrap 官方 Tab API 激活标签，确保同步切换内容面板
    const targetTab = document.querySelector(savedTabId);
    if (targetTab) {
      const tabInstance = new bootstrap.Tab(targetTab);
      tabInstance.show();
    }
  }
});

// 监听标签切换完成事件，保存当前选中的标签到 localStorage
document.querySelectorAll('#pills-tab .nav-link').forEach(tab => {
  tab.addEventListener('shown.bs.tab', function(e) {
    // 保存当前激活标签的选择器（比如 #pills-home-tab）
    localStorage.setItem('activePillTab', '#' + e.target.id);
  });
});

原代码失效的常见原因 #

• 监听错误事件：用 click 事件而非 shown.bs.tab，会在 Bootstrap 完成标签切换前保存状态，导致记录的标签不准确。
• 直接操作 DOM 类名：手动给 .nav-link 加 active 类但未调用 Bootstrap 的 Tab.show() 方法，会造成内容面板未同步切换，激活状态显示异常。
• 执行时机错误：代码在 DOM 未完全加载时运行，无法找到导航元素，导致事件绑定失败。
• 标识保存错误：保存的是标签文本或非唯一标识，刷新后无法精准匹配到对应的标签元素。

注意事项 #

• 确保所有导航按钮的 id 属性唯一，且与内容面板的 data-bs-target 对应。
• 若浏览器禁用 localStorage，可添加降级逻辑（比如默认激活第一个标签）。
• 若是基于路由的页面跳转（而非锚点切换），需调整保存逻辑为记录当前路由路径，加载时匹配路径设置激活状态。

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