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

【问题标题】：Bootstrap 3 Tabs Not Switching Active State ProperlyBootstrap 3 选项卡未正确切换活动状态
【发布时间】：2014-10-01 02:08:19
【问题描述】：

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

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

【问题讨论】：

标签： html twitter-bootstrap-3 bootstrap-tabs

【解决方案1】：

下面是如何让它工作：

给标签<ul>添加一个id，像这样：

<ul id="myTab" class="nav nav-tabs" role="tablist">
在页面底部，</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>
通过 javascript 启用标签（一定要在 bootstrap js 下面添加）：

<script> $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) </script>
重新加载您的页面，它现在应该可以工作了。

【讨论】：

相信我，如果它像复制引导网站所说的那样简单，我就不会在这里了。这个不行，我试过了。
好吧，就我而言，第 3 步是我需要的。

【解决方案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 驱动）不起作用，但当我想起来时，一切又好了。

【讨论】：

我确实在页眉的页面上加载了 JQuery。
嗯。那么你到底想在这些标签中发生什么？正如您编写它们时，它们似乎按预期工作（至少在 CodePen 中）。您是否试图触发 add'l 行为？
我有其中的图表。当我在“活动”类上切换选项卡时，不会将其应用于其他选项卡，并且其中的图表无法正确显示。

【解决方案3】：

我回答了我自己的问题。

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

【讨论】：

【解决方案4】：

如果当今时代的人看到这一点，请确保在新版本的引导程序中在您的 BODY TAG 末尾包含以下 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>

【讨论】：