HTML Вкладки, созданные с помощью foreach - PullRequest
Новая
       27

HTML Вкладки, созданные с помощью foreach

1 голос
/ 10 июля 2020

Я работаю над веб-страницей, на которой должны быть вкладки. Вкладки должны быть созданы с использованием a для каждой, потому что контент должен быть загружен из списка. Я нашел учебник по w3schools (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). Я попытался повторить примеры и добавил foreach l oop. Но если я щелкну одну из вкладок, я попаду в 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>

1 Ответ

1 голос
/ 10 июля 2020

Вы забыли включить data-toggle="tab" внутри <a class="nav-link active" href="#foo_@foo.Id">@foo.Title</a>. Затем вам также необходимо удалить active внутри него, потому что он находится внутри foreach l oop. Он должен работать, если вы его добавите.

...