HTML Tabs that are created using foreach - html

Question

Im working on a a web page that has to have tabs. The tabs have to be created using a for each because the content has to be loaded out of a list. I found a tutorial on w3schools (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). I tried to replicate on of the examples and added the foreach loop. But if i click one of the tabs, i get sent to the index.hmtl (probably because of the # in the href).I can neither change the model or the list.
<div class="container">
<ul class="nav nav-tabs">
#foreach (FooModel foo in fooModels)
{
<li class="nav-item">
<a class="nav-link active" href="#foo_#foo.Id">#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="application_#fooModel.Id" 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

You forgot to include data-toggle="tab" inside <a class="nav-link active" href="#foo_#foo.Id">#foo.Title</a>. You then also need to remove the active inside it because it is inside a foreach loop. It should work if you add it.