Bootstrap nav-tabs 不在 mvc 中顯示選項卡內容？

Question

我正在使用列表從控制器動態生成/加載選項卡。

<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)
       {
          <a class="nav-link mb-5 p-3" id="v-pills-home-tab" data-toggle="pill" href="#@item.Control" role="tab" aria-controls="v-pills-home" aria-selected="true">
               <span class="font-weight-bold small text-uppercase">@item.Control</span>     //tabs 
         </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)
        {
         <div class="tab-pane fade shadow rounded bg-white show active p-5" id="@item.Control" role="tabpanel" aria-labelledby="v-pills-home-tab">
          <h5 class="hk-sec-title">@item.Control</h5>                //tab content
        }
  </div>
   <!-- /Tabs content -->
</div>

我的想法是我設法生成了標簽導航欄而不是標簽內容。 欲了解更多選項卡的外觀和填充，請參考： https://jsfiddle.net/bootstrapious/68o3pmcv/

Answer 1

您的 html 有各種錯誤和拼寫錯誤，例如

<div class=""row>應該是<div class="row">

row div 和tab-pane div 也沒有結束標記。

但是您的代碼的主要問題是您正在向所有tab-pane div 添加show active類。 我向ViewBag.Controls項目添加了一個 boolean 標志，並且僅在該標志為真時添加show active類。 最后結果：

<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)
            {
                <a class="nav-link mb-5 p-3 shadow @(item.Active ? "active" : null)" id="v-pills-home-tab" data-toggle="pill" href="#@item.Control" role="tab" aria-controls="v-pills-home" aria-selected="true">
                    <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)
            {
                <div class="tab-pane fade shadow rounded bg-white p-5 @(item.Active ? "show active" : null)" id="@item.Control" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    <h5 class="hk-sec-title text-dark">@item.Control</h5>
                </div>
            }
        </div>
        <!-- /Tabs content -->
    </div>
</div>

我用這些數據測試了上面的代碼：

ViewBag.Controls = new[]
{
    new { Control = "test1", Active = false },
    // Selected by default. You can change this but only add active true to one item.
    new { Control = "test2", Active = true }, 
    new { Control = "test3", Active = false },
    new { Control = "test4", Active = false }
};