Bootstrap pill tab点击触发报错，如何实现刷新后回到上次选中标签页

• 版本属性不匹配：你引入的是Bootstrap 4.x版本，但标签上使用了Bootstrap 5专属的带bs-前缀的data-bs-toggle属性，Bootstrap 4无法正确识别该属性为tab切换触发标记，误将元素初始化了tooltip实例，后续点击触发事件时就会报重复实例绑定的错误。
• 面板结构错误：所有.tab-pane都添加了show active类，Bootstrap tab组件要求同一时间只能有一个激活的面板，多个激活状态会导致组件初始化逻辑冲突。
• 自定义JS逻辑不完善：现有逻辑仅给标签加了激活类，没有同步切换对应面板的显示状态，也没有和Bootstrap自带的tab切换逻辑做适配，同时没有绑定点击事件触发保存逻辑，还缺少localStorage空值的容错处理。

第一步：修正HTML代码 #

1. 将所有<a class="nav-link">上的data-bs-toggle="tab"替换为Bootstrap 4对应的data-toggle="tab"
2. 移除tab-content中除第一个之外所有.tab-pane的show active类
   修正后的HTML参考：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<ul class="nav nav-pills" role="tablist">
  <li class="nav-item"><a class="nav-link active" id="pills-1-tab" data-toggle="tab" href="#pills-1"><i class="icofont icofont-man-in-glasses"></i>1</a></li>
  <li class="nav-item"><a class="nav-link" id="pills-2-tab" data-toggle="tab" href="#pills-2"><i class="icofont icofont-man-in-glasses"></i>2 </a></li>
  <li class="nav-item"><a class="nav-link" id="pills-3-tab" data-toggle="tab" href="#pills-3"><i class="icofont icofont-contacts"></i>3</a></li>
  <li class="nav-item"><a class="nav-link" id="pills-4-tab" data-toggle="tab" href="#pills-4"><i class="icofont icofont-contacts"></i>4</a></li>
  <li class="nav-item"><a class="nav-link" id="pills-5-tab" data-toggle="tab" href="#pills-5"><i class="icofont icofont-contacts"></i>5</a></li>
  <li class="nav-item"><a class="nav-link" id="pills-6-tab" data-toggle="tab" href="#pills-6"><i class="icofont icofont-contacts"></i>6</a></li>
</ul>

<div class="tab-content" id="pills-icontabContent">
  <div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">Tab 1</div>
  <div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2-tab">Tab 2</div>
  <div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3-tab">Tab 3</div>
  <div class="tab-pane fade" id="pills-4" role="tabpanel" aria-labelledby="pills-4-tab">Tab 4</div>
  <div class="tab-pane fade" id="pills-5" role="tabpanel" aria-labelledby="pills-5-tab">Tab 5</div>
  <div class="tab-pane fade" id="pills-6" role="tabpanel" aria-labelledby="pills-6-tab">Tab 6</div>
</div>

第二步：替换JS逻辑 #

直接绑定Bootstrap的tab切换事件存储选中状态，页面加载时读取存储值调用Bootstrap官方的tab激活方法，避免手动修改类和原生逻辑冲突：

// 页面加载完成后执行
$(function () {
  // 绑定tab切换事件，切换时存储选中的标签id
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem("tagSelected", e.target.id);
  })

  // 读取存储的选中标签，存在则激活
  const savedTabId = localStorage.getItem("tagSelected");
  if (savedTabId && document.getElementById(savedTabId)) {
    $(`#${savedTabId}`).tab('show');
  }
})

修改后即可解决报错问题，同时实现页面刷新后自动恢复上次选中标签的效果。

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