如何在bootstrap 4.5.2中重新加载页面时保留当前活动选项卡

在Bootstrap 4.5.2中重新加载页面时保留当前活动选项卡，可以通过使用JavaScript来实现。具体的实现步骤如下：

在HTML中，为每个选项卡添加一个唯一的标识符（id或data属性），以便后续恢复活动状态。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" id="tab1" data-toggle="tab" href="#content1">选项卡1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2" data-toggle="tab" href="#content2">选项卡2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab3" data-toggle="tab" href="#content3">选项卡3</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="content1">
    内容1
  </div>
  <div class="tab-pane fade" id="content2">
    内容2
  </div>
  <div class="tab-pane fade" id="content3">
    内容3
  </div>
</div>

使用JavaScript代码，监听页面加载完成的事件，并获取当前活动选项卡的标识符。

$(document).ready(function(){
  var activeTab = localStorage.getItem('activeTab');
  if (activeTab) {
    $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
  }
});

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
  var activeTab = $(e.target).attr('href');
  localStorage.setItem('activeTab', activeTab);
});