如何在 ASP.NET 回传或页面刷新后在 Bootstrap 4 中保留活动选项卡

Question

我想在 Bootstrap 4 上使用 ASP.NET 回发或刷新页面（例如，通过 F5）后保留当前活动的选项卡.我已经尝试了很多替代方案，但 none 工作成功。

代码如下：

<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>

Answer 1

在 postback/refresh 之后尝试将活动选项卡的样式设置为 'nav-item nav-link active" 使用 C#

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

相同的 id

如何在 ASP.NET 回传或页面刷新后在 Bootstrap 4 中保留活动选项卡

How to retain the Active Tab in Bootstrap 4 after postback or page refresh on ASP.NET

asp.net

twitter-bootstrap

bootstrap-4

postback

page-refresh