0

我有一个带有两个引导选项卡的页面。在每个选项卡中，一个选项卡都设置为活动的

这是我的标记：

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

如果页面加载，则只有最后一个 tabbable 的选项卡处于活动状态。第一个 tabbable 的活动状态丢失。

使用 javascript 将两个选项卡设置为活动也不起作用。

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

如果我data-spy="scroll"从正文标签中删除它就可以了。

如何让 scrollspy 和多个标签工作？

4

1 回答 1

1

确保你的身体也有一个data-targetScrollSpy..

<body data-spy="scroll" data-target="software-tab-1">

演示： http: //www.bootply.com/70727

于 2013-07-31T08:05:57.880 回答