Question

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

这是我的标记：

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

如果我从body标签中删除data-spy="scroll"，它就能正常工作。

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

Answer 1

确保您的身体也有ScrollSpy的data-target ..

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

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

具有多个tabbable和滚动间谍的bootstrap无法正常工作

1 个答案: