如何在 ASP.NET 上的回发或页面刷新后保留 Bootstrap 4 中的活动选项卡答案

【问题标题】：How to retain the Active Tab in Bootstrap 4 after postback or page refresh on ASP.NET如何在 ASP.NET 上的回发或页面刷新后保留 Bootstrap 4 中的活动选项卡
【发布时间】：2020-08-20 14:25:07
【问题描述】：

我想在使用 ASP.NET 时在 Bootstrap 4 上进行回发或页面刷新（例如，通过 F5）后保留当前活动的选项卡。我尝试了很多替代方案，但没有一个能成功。

代码如下：

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

【问题讨论】：

在回发到 ASP.NET 和页面刷新时处理此问题的解决方案可能不同。到目前为止，您尝试了哪些方法？您正在使用哪个版本的 ASP.NET？您是否使用 ASP.NET 来生成当前选项卡？如果是这样，包含该代码可能会很有用。不过，通常情况下，这将通过片段标识符（例如，#nav-profile）来处理。

标签： asp.net twitter-bootstrap bootstrap-4 postback page-refresh

【解决方案1】：

在回发/刷新后尝试将活动标签的样式设置为 'nav-item nav-link active' 使用 C#

当您单击任何选项卡时。将其id保存在c#中，回发后，将id与class设置为“nav-item nav-link active”

【讨论】：