使用 foreach 创建的 HTML 选项卡答案

【问题标题】：HTML Tabs that are created using foreach使用 foreach 创建的 HTML 选项卡
【发布时间】：2020-10-31 03:52:19
【问题描述】：

我正在处理一个必须有标签的网页。必须使用 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="#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>

【问题讨论】：

标签： html css razor foreach blazor

【解决方案1】：

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

【讨论】：