如何使用jQuery实现页面刷新后保持当前标签页激活状态？

我尝试实现页面重新加载/刷新后保持当前标签页处于激活状态，但目前无法正常生效。请问我哪里出错了？恳请各位帮忙解答，谢谢。

HTML视图 #

<!-- Tabs navs -->
<ul class="nav nav-tabs mb-5" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab"
      aria-controls="ex1-tabs-1" aria-selected="true">Slots</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link " id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab"
      aria-controls="ex1-tabs-2" aria-selected="false">Booking List</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab"
      aria-controls="ex1-tabs-3" aria-selected="false">Rooms</a>
  </li>
</ul>
<!-- Tabs navs -->


<div class="tab-pane fade active show" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
   Tab one
</div>

<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
   Tab Two
</div>

<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
   Tab Three
</div>

注：原HTML中第一个tab-pane需添加active show类，才能默认显示对应面板

原脚本 #

$(document).ready(function(){

  $('a[data-mdb-toggle="tab"]').on('show.bs.tab', function(e) {

      localStorage.setItem('activeTab', $(e.target).attr('href'));
  });
  
  var activeTab = localStorage.getItem('activeTab');
  if(activeTab){
      $('#ex1 a[href="' + activeTab + '"]').tab('show');
  }
});

问题排查与修正 #

几个可能导致失效的原因及解决办法：

1. MDB组件的事件与方法适配问题 #

你使用的是MDB（Material Design for Bootstrap）组件，原生Bootstrap的show.bs.tab事件和.tab('show')方法与MDB的实现不兼容。MDB对应标签切换完成的事件是shown.mdb.tab，手动操作类的方式比调用组件方法更可靠。

2. 初始化时机问题 #

$(document).ready可能在MDB组件完全初始化前执行，改用$(window).on('load')确保所有资源加载完成后再绑定事件和恢复标签状态。

3. 未清理初始激活状态 #

恢复标签时需要先移除所有导航项和面板的active类，避免多个元素同时处于激活状态。

修正后的脚本 #

$(window).on('load', function() {
  // 标签切换完成后存储当前标签的href
  $('a[data-mdb-toggle="tab"]').on('shown.mdb.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
  });

  // 页面加载时恢复之前激活的标签
  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    // 移除所有导航项的active状态
    $('.nav-link').removeClass('active').attr('aria-selected', 'false');
    // 移除所有面板的active状态
    $('.tab-pane').removeClass('active show');
    
    // 激活目标导航项
    $(`#ex1 a[href="${activeTab}"]`).addClass('active').attr('aria-selected', 'true');
    // 激活目标面板
    $(activeTab).addClass('active show');
  }
});

额外检查 #

• 打开浏览器控制台的Application面板，查看localStorage中是否存在activeTab键，确认存储的值是否正确。
• 确保MDB的JS文件已正确引入，且版本与组件匹配。

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