使用foreach创建的HTML选项卡

Question

我正在开发一个必须有选项卡的网页。选项卡必须使用for each创建，因为内容必须从列表中加载。我找到了w3schools的教程(https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp)。我尝试复制其中一个例子，并添加了foreach循环。但如果我点击其中一个选项卡，我会被发送到index.hmtl(可能是因为href中的#(。我既不能更改模型也不能更改列表。

<div class="container">
<ul class="nav nav-tabs">
@foreach (FooModel foo in fooModels)
{
<li class="nav-item">
<a class="nav-link active" href="#[e-mail]">@foo.Title</a>
</li>
}
</ul>
</div>


<div class="card-body">
<h3>foo's</h3>
<div class="tab-content">
@foreach (FooModel fooModel in fooModels)
{
<div id="[e-mail]" class="tab-pane fade">
<h3>Foo:: @fooModel.Title</h3>
@if (IsInEditMode == true)
{
<InputDate @bind-Value="fooModel.DateFrom"></InputDate>
<InputDate @bind-Value="fooModel.DateTo"></InputDate>
}
else
{
<p>@fooModel.DateFrom.ToString()</p>
<p>@fooModel.DateTo.ToString()</p>
}
</div>
}
</div>
</div>

Answer 1

您忘记在<a class="nav-link active" href="#[e-mail]">@foo.Title</a>中包含data-toggle="tab"。然后还需要删除其中的active，因为它位于foreach循环中。如果你添加它，它应该会起作用。