Question

我有一些代码 - 只是在每个选项卡式面板中带有单独图形的选项卡式面板。当我切换标签时，内容未正确加载。当我点击另一个标签时，面板的活动状态没有改变，你能帮助一个brotha弄明白吗？

<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

以下是如何使其发挥作用：

在标签<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>
重新加载您的网页，现在应该可以使用。

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

我回答了自己的问题。

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

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

3 个答案: