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 を追加します<ul>。

    <ul id="myTab" class="nav nav-tabs" role="tablist">

  2. </body>次のように、ページの下部のタグの前に jQuery とブートストラップ 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 を使用してタブを有効にします (ブートストラップ js の下に必ず追加してください)。

    <script> $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) </script>

  4. ページをリロードすると、すぐに機能するはずです。

于 2014-10-01T04:37:42.060 に答える