引导导航选项卡未在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">

此外，rowdiv和tab-panediv没有结束标记。

但是，代码的主要问题是，要将show active类添加到所有tab-panediv中。我向ViewBag.Controls项添加了一个布尔标志，并且只有当该标志为true时才添加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 }
};