如何在Bootstrap 4中利用localStorage实现页面刷新后保持激活标签页？

嘿，我懂你的困扰！Bootstrap 4的标签页机制和Bootstrap 3确实有细微差异，你的思路是对的，只是有几个小细节需要调整，就能让代码正常工作了。

先分析下问题：页面加载时默认的active类已经绑定在第一个标签页上，直接调用tab('show')有时会和默认状态冲突，导致切换不生效。我们可以调整代码逻辑，确保状态切换的完整性。

修改后的完整JS代码如下：

$(document).ready(function(){
  // 标签页切换完成后，保存当前选中项到localStorage
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
  });

  // 页面加载时恢复之前选中的标签页
  var activeTab = localStorage.getItem('activeTab');
  if(activeTab){
    // 先移除所有标签页头部的激活状态
    $('.nav-link').removeClass('active');
    // 移除所有标签页内容的激活状态
    $('.tab-pane').removeClass('show active');
    
    // 给目标标签页头部添加激活类并触发切换
    $('#myTab a[href="' + activeTab + '"]').addClass('active').tab('show');
    // 给对应标签页内容添加激活类
    $(activeTab).addClass('show active');
  }
});

几个关键调整点：

• 把监听事件从show.bs.tab改成shown.bs.tab：确保标签页完全切换完成后再保存状态，避免出现状态不一致的情况
• 手动清理全局激活状态：先移除所有标签页头部和内容的active/show类，再给目标项添加状态，彻底避免和默认激活状态的冲突
• 同步处理标签页头部和内容：Bootstrap 4的标签页需要头部和对应内容区域同时处于激活状态，才能正常显示

另外要确认你的页面已经按正确顺序引入了依赖文件：先引入jQuery，再引入Bootstrap 4的JS文件，否则标签页的JS方法会无法生效。

测试一下：切换到MENU2后刷新页面，就能看到MENU2保持激活状态了！

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