6

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

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

4 回答 4

8

以下是如何让它工作：

  1. 将 id 添加到 tabs <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. 重新加载您的页面，它现在应该可以工作了。

于 2014-10-01T04:37:42.060 回答
0

您是否可能忘记在页面上包含 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 驱动）不起作用，但是当我记得时，一切又好了。

于 2014-10-01T02:22:05.193 回答
0

我回答了我自己的问题。

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

于 2014-10-01T18:58:01.773 回答
0

如果当今时代的人看到这一点，请确保在新版本的引导程序中在您的身体标签末尾包含以下 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>
于 2021-12-06T05:43:25.417 回答