页面刷新后保持当前选中tab标签页不跳转的实现问题咨询

你用的是Bootstrap的Tab组件，通过 localStorage 存储激活状态即可实现刷新保留当前标签页，步骤如下：

第一步：补全HTML结构 #

你当前代码里tab-content只写了Section1，先把剩下4个标签对应的内容补全：

<div class="tab-content tabs">
  <div role="tabpanel" class="tab-pane fade in active" id="Section1">
    <p>Tab1 内容</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="Section2">
    <p>Tab2 内容</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="Section3">
    <p>Tab3 内容</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="Section4">
    <p>Tab4 内容</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="Section5">
    <p>Tab5 内容</p>
  </div>
</div>

第二步：添加JS逻辑 #

引入jQuery和Bootstrap3的JS依赖后，添加以下代码：

// 页面加载完成后执行
$(function () {
  // 读取本地存储的激活tab
  const activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    // 激活存储的标签页
    $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
  }

  // 监听tab切换事件，存储当前激活的tab
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
  });
});

可选方案：使用URL hash实现 #

如果需要支持分享链接也能直接打开对应标签页，可以把存储位置换成URL hash：

$(function () {
  // 读取url里的hash
  const hash = window.location.hash;
  if (hash && $('.nav-tabs a[href="' + hash + '"]').length) {
    $('.nav-tabs a[href="' + hash + '"]').tab('show');
  }

  // 切换tab时更新url hash
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = $(e.target).attr('href');
  });
});

两种方案的区别：

• localStorage方案：仅在当前浏览器生效，关闭页面再打开也会保留上次打开的标签
• URL hash方案：分享链接给其他人，对方打开后直接定位到对应标签，刷新也保留状态

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