具有多个可选项卡和滚动间谍的引导程序不起作用答案

【问题标题】：bootstrap with multiple tabbable and scroll spy not working具有多个可选项卡和滚动间谍的引导程序不起作用
【发布时间】：2013-07-30 21:58:35
【问题描述】：

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

这是我的标记：

<!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 和多个标签工作？

【问题讨论】：

标签： twitter-bootstrap bootstrap-tabs

【解决方案1】：

确保你的身体也有一个 data-target 用于 ScrollSpy..

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

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

【讨论】：