bootstrap tab切换后，刷新 页面 回到被选中的tab页签

**Bootstrap Tab 切换后刷新页面回到被选中Tab页签**

在 Bootstrap 中，我们可以使用 `tab` 组件来实现 tab 切换功能。然而，问题是当我们切换到另一个 tab 后，刷新页面时，会自动跳转回第一个 tab。为了解决这个问题，我们需要手动保存当前激活的 tab 状态，并在页面刷新后恢复它。

**步骤1：保存当前激活的tab状态**

首先，我们需要在 JavaScript 中保存当前激活的 tab 状态。在 Bootstrap 的 `tab` 组件中，激活的 tab 是通过类名 `active` 来标识的。我们可以使用 jQuery 来获取当前激活的 tab：

javascript//保存当前激活的tab状态var activeTab = $('.nav-tabs .active').attr('id');

**步骤2：在页面刷新后恢复当前激活的tab**

当我们点击刷新按钮时，我们需要恢复之前保存的激活 tab 状态。在这里，我们可以使用 JavaScript 来重新激活之前保存的 tab：

javascript// 在页面刷新后恢复当前激活的tab$('#refreshButton').click(function() {
 // 恢复之前保存的激活tab状态 $('#myTab a[href="#' + activeTab + '"]').tab('show');
});

**步骤3：整合所有代码**

现在，我们需要将所有代码整合到一起。我们可以在 HTML 中添加一个刷新按钮，并使用 JavaScript 来保存当前激活的 tab 状态和恢复它：

html<!-- Bootstrap Tab -->
<div class="tab-content">
 <div id="home" class="tab-pane fade in active">
 <!-- Tab1 内容 -->
 </div>
 <div id="profile" class="tab-pane fade">
 <!-- Tab2 内容 -->
 </div>
 <div id="contact" class="tab-pane fade">
 <!-- Tab3 内容 -->
 </div>
</div>

<!-- 刷新按钮 -->
<button id="refreshButton">刷新</button>

<script>
 //保存当前激活的tab状态 var activeTab = $('.nav-tabs .active').attr('id');

 // 在页面刷新后恢复当前激活的tab $('#refreshButton').click(function() {
 // 恢复之前保存的激活tab状态 $('#myTab a[href="#' + activeTab + '"]').tab('show');
 });
</script>

**总结**

通过以上步骤，我们可以实现 Bootstrap Tab 切换后刷新页面回到被选中Tab页签的功能。我们需要手动保存当前激活的 tab 状态，并在页面刷新后恢复它。

**注意事项**

* 在使用上述代码时，请确保你已经引入了 Bootstrap 的 CSS 和 JavaScript 文件。
* 如果你有多个 Tab 组件，需要分别保存和恢复每个 Tab 的状态。
* 上述代码仅适用于 Bootstrap3.x 版本。如果你使用的是 Bootstrap4.x 版本，请参考 Bootstrap4.x 文档中的相应示例。