Bootstrap 4.3 Tab не переключается с первой вкладки

Question

Я включил вкладки начальной загрузки в свое веб-приложение, следуя документации на сайте начальной загрузки .

Мне до сих пор удалось воспроизвести анимацию исчезновения первой вкладки и показать, что две другие вкладки, похоже, не работают, и я довольно озадачен, почему.

<div id="container-fluid">
    <div class="row">
        <div class="col-md-12">

            <ul class="nav nav-tabs" role="tablist">
                <li id="dashboardTab" class="nav-item">
                    <a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a>
                </li>
                <li id="usersTab" class="nav-item">
                    <a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a>
                </li>
                <li id="wholesalerTab" class="nav-item">
                    <a class="nav-link" id="wholesalerCreate-tab" data-toggle="tab" href="#wholesalerCreate" role="tab" aria-controls="wholesalerCreate" aria-selected="false">Wholesalers<span onclick="onCloseTabButtonClick(1)">X</span></a>
                </li>
            </ul>

            <div class="tab-content">
                <div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
                    <h3>Dash Tab</h3>
                    <iframe class="iframe-size" id="dashboardHolder" src="Dashboard.aspx" />
                </div>
                <div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
                    <h3>User Tab</h3>
                    <iframe class="iframe-size" src="UserCreate.aspx" />
                </div>
                <div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
                    <h3>Wholesaler Tab</h3>
                    <iframe class="iframe-size" src="WholsalerCreate.aspx" />
                </div>
            </div>

        </div>
    </div>
</div>

Множество похожих вопросов, которые я прочитал, показывают, что ошибка просто не импортирует файлы Jquery и начальной загрузки js.

<script src="../Scripts/jquery-3.4.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>

У меня есть это в заголовке и я верю, что это работает.

Answer 1

Вкладки не работают с Iframes. Так что удали их. Это также лучший пользовательский опыт.

<div class="tab-content">
    <div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
        <h3>Dash Tab</h3>
        <div class="iframe-size">
            ...
        </div>
    </div>
    <div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
        <h3>User Tab</h3>
        <div class="iframe-size">
            ...
        </div>
    </div>
    <div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
        <h3>Wholesaler Tab</h3>
        <div class="iframe-size">
            ...
        </div>
    </div>
</div>