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

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

以下是如何使其工作:

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

我回答了我自己的问题。

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