html - 使用 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>

标签： htmlcssrazorforeachblazor

Answer 1

你忘了包括data-toggle="tab"inside <a class="nav-link active" href="#[e-mail]">@foo.Title</a>。然后，您还需要删除它的active内部，因为它位于 foreach 循环内。如果你添加它应该可以工作。