Bootstrap 3选项卡未正确切换活动状态

Question

我有这段代码——只是选项卡面板，每个选项卡面板中都有单独的图。切换选项卡时，内容加载不正确。当我单击另一个选项卡时，面板的活动状态没有改变，你能帮助兄弟解决这个问题吗？

<div class="col-sm-6">
    <!-- Tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#DailyIncome" role="tab" data-toggle="tab">Daily Income</a></li>
        <li><a href="#YearlyIncome" role="tab" data-toggle="tab">Yearly Income</a></li>
        <li><a href="#Clients" role="tab" data-toggle="tab">Clients</a></li>
        <li><a href="#Orders" role="tab" data-toggle="tab">Orders</a></li>
    </ul>
    <!-- Content -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="DailyIncome">
            <div id="DailyIncomeChart" class="DailyIncomePanel"></div>
        </div>
        <div class="tab-pane fade" id="YearlyIncome">
            <div id="YearlyIncomeChart" class="YearlyIncomePanel"></div>
        </div>
        <div class="tab-pane fade" id="Clients"></div>
        <div class="tab-pane fade" id="Orders"></div>
    </div>
</div>

Answer 1

以下是如何使其工作：

1. 向选项卡<ul>添加一个id，如下所示：

   <ul id="myTab" class="nav nav-tabs" role="tablist">

2. 在页面底部</body>标记之前加载jQuery和bootstrap js，如下所示：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

3. 通过javascript启用选项卡（请确保将其添加到bootstrap js下面）：

   <script> $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) </script>

4. 重新加载您的页面，它现在应该可以工作了。

Answer 2

您可能忘记在页面上包含jQuery了吗？当我第一次制作这个代码笔时：

http://codepen.io/anon/pen/tGhHk

我忘了包括：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

当然，选项卡（在Bootstrap中由Javascript驱动）也不起作用，但当我记得的时候，一切都很好。

Answer 3

如果当今时代的人看到了这一点，使用新版本的引导程序，请确保在身体标签的末尾包含以下3个脚本。这是针对Bootstrap 4.1

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 4

我回答了自己的问题。

我只是在每个选项卡窗格中添加了.active，并将溢出设置为隐藏在CSS中。