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. 向选项卡添加 id

   <ul>

   ，如下所示：

   <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？当我第一次制作这个 codepen 时：

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

如果当今时代的人看到此内容，请确保在新版本的 bootstrap 中在您的 BODY 标签末尾包含以下 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

这不会解决原始提问者的问题，因为他们正在手动编码 Bootstrap CSS 代码😂

对于使用 Bootstrap Studio 的用户，如果您进入 Studio > Online 小部件（如下图所示），有许多通用的类似选项卡的小部件可以在功能上代替选项卡。 至少其中一个肯定可以工作，因为其中一些的编码与库存选项卡小部件不同：

Answer 5

我回答了我自己的问题。

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