在MVC中Bootstrap nav-tabs无法显示tab-content的问题求助

你的代码存在几处导致标签内容无法正常显示的问题，以下是具体修正点和完整修复后的代码：

核心问题分析 #

• 导航项的id、aria-controls属性未动态绑定，导致和对应内容面板无法关联
• 所有导航项都设置了aria-selected="true"，Bootstrap无法识别默认选中的标签
• 所有内容面板都添加了show active类，违反标签页默认仅显示一个面板的逻辑
• 内容面板的aria-labelledby未关联对应导航项的动态ID
• 存在语法错误：<div class=""row>多了一个空引号，且内容面板的<div>未闭合

修复后的完整代码 #

<div class="row">
<div class="col-xl-3">
<!-- Tabs nav -->
  <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      @foreach (var item in ViewBag.Controls)
       {
          <!-- 动态生成唯一ID、关联属性，仅第一个项设置aria-selected="true" -->
          <a class="nav-link mb-5 p-3 @(ViewBag.Controls.IndexOf(item) == 0 ? "active" : "")" 
             id="v-pills-@item.Control-tab" 
             data-toggle="pill" 
             href="#@item.Control" 
             role="tab" 
             aria-controls="v-pills-@item.Control" 
             aria-selected="@(ViewBag.Controls.IndexOf(item) == 0 ? "true" : "false")">
               <span class="font-weight-bold small text-uppercase">@item.Control</span>
         </a>
       }
  </div>
  <!-- /Tabs nav -->
</div>
<div class="col-xl-9">
<!-- Tabs content -->
  <div class="tab-content" id="v-pills-tabContent">
        @foreach (var item in ViewBag.Controls)
        {
         <!-- 仅第一个内容面板添加show active，关联对应导航项的ID，闭合div标签 -->
         <div class="tab-pane fade shadow rounded bg-white p-5 @(ViewBag.Controls.IndexOf(item) == 0 ? "show active" : "")" 
              id="@item.Control" 
              role="tabpanel" 
              aria-labelledby="v-pills-@item.Control-tab">
          <h5 class="hk-sec-title">@item.Control</h5>
         </div> <!-- 补全闭合标签 -->
        }
  </div>
   <!-- /Tabs content -->
</div>
</div>

关键修改说明 #

1. 导航项的id改为v-pills-@item.Control-tab，确保每个导航项有唯一ID，同时和内容面板的aria-labelledby对应
2. 用ViewBag.Controls.IndexOf(item) == 0判断是否为第一个项，仅第一个项添加active类并设置aria-selected="true"
3. 内容面板仅第一个添加show active类，确保默认只显示第一个标签内容
4. 补全内容面板的</div>闭合标签，修正语法错误
5. 修正class=""row为class="row"，移除多余空引号

内容的提问来源于stack exchange，提问作者Calm Boy