0

タブ可能な2つのブートストラップを持つページがあります。すべてのタブ可能なタブで、1 つのタブがアクティブに設定されます

ここに私のマークアップがあります:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    </head>

    <body data-spy="scroll">
        <div>
            <ul class="nav nav-tabs" id="tablist-1">
                <li><a href="#software-tab-1" data-toggle="tab">software 1</a></li>
                <li class="active"><a href="#hardware-tab-1" data-toggle="tab">hardware 1</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane" id="software-tab-1">software 1</div>
                <div class="tab-pane active" id="hardware-tab-1">hardware 1</div>
            </div>
        </div>

        <div>
            <ul class="nav nav-tabs" id="tablist-2">
                <li class="active"><a href="#software-tab-2" data-toggle="tab">software 2</a></li>
                <li><a href="#hardware-tab-2" data-toggle="tab">hardware 2</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="software-tab-2">software 2</div>
                <div class="tab-pane" id="hardware-tab-2">hardware 2</div>
            </div>
        </div>

    </body>
</html>

ページが読み込まれると、最後のタブ可能なタブのみがアクティブになります。最初のタブ可能なアクティブな状態がありません。

JavaScript で 2 つのタブをアクティブに設定しても機能しません。

<script>
    $(document).ready(function(){
        $('#tablist-1 a:first').tab('show');
        $('#tablist-2 a:first').tab('show');
    });
</script>

data-spy="scroll"body タグから削除すると機能します。

scrollspy と複数のタブを機能させるには?

4

1 に答える 1