为什么即使选择了其他选项卡，最后一个选项卡窗格也始终处于活动状态？

Question

我正在这个包含子视图的大视图上使用引导程序。我在大视图上有大量选项卡，但只有一组始终出现故障。我已经对照其他工作选项卡药丸部分的语法检查了语法，但最后一个选项卡部分始终存在。

<div class="row" style="height:350px">
                    <div class="col-lg-3">
                        <h3>Users</h3>
                        <ul class="nav nav-pills nav-stacked">

                            <li id="Cre" class ="active"><a data-toggle="pill" href="#CreUser" onchange="HideIt(1)"> Create User</a></li>
                            <li id="Mod"><a data-toggle="pill" href="#ModUser" onchange="HideIt(2)"> Modify User</a></li>
                            <li id="Del"><a data-toggle="pill" href="#DelUser" onchange="HideIt(3)"> Delete User</a></li>
                        </ul>


                    </div>
                    <div class="container col-lg-8 col-lg-offset-1" style="height:95%;border-radius:70px;border-color:darkblue; border:1px solid">
                        <div class="tab-content col-lg-offset-1">
                            <div id="CreUser" class="tab-pane active">
                                @Html.Action("CreateUser", "Home")
                            </div>
                            <div id="ModUser" class="tab-pane">
                                @Html.Action("ModifyUser", "Home")
                            </div>
                          //  NO MATTER WHAT THIS TAB ALWAYS APPEARS IN THE PANE OR IS PUSHED DOWN OUT OF THE WINDOW PANE BY THE OTHER TAB SECTIONS
                            <div id="DelUser" class="tab-pane">
                                @Html.Action("DeleteUser", "Home")
                            </div>
                           

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

Example Screenshot of Tab Malfuction

任何帮助将不胜感激

Answer 1

按顺序链接引导程序：

• bootstrap.css
• jquery.min
• bootstrap.js

Check out this:jsfiddle

Answer 2

我错过了修改用户操作视图中的一个额外 div 元素。这导致我的选项卡窗格提前退出，从而导致下一个选项卡窗格始终处于活动状态。