我正在一个必须有标签的网页上工作。必须使用每个选项卡来创建选项卡，因为必须从列表中加载内容。我在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="#[email protected]">@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="[email protected]" 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>
您忘了包含data-toggle="tab"在内<a class="nav-link active" href="#[email protected]">@foo.Title</a>。然后，您还需要删除其中的active内部内容，因为它位于foreach循环中。如果添加它，它应该可以工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句