Question

我已按照引导website.上的文档将引导选项卡合并到我的Web应用程序中

到目前为止，我已经设法使第一个标签淡入淡出动画得以播放并显示其他两个标签似乎不起作用，并且我对为什么这么做感到很困惑。

<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和bootstrap js文件。

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

我已经在标题中找到了它，并且确实认为它可以正常工作。

Answer 1

制表符不适用于iframe。因此删除它们。这也是更好的用户体验。

<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>

Bootstrap 4.3选项卡未从第一个选项卡切换

1 个答案: