Question

我正在尝试使用Bootstraps ScrollSpy或任何“滚动间谍”类型脚本来处理名为#reportContainer的可滚动div 。

我的标签中有两个链接，因为一个是删除页面的删除按钮。与班级.page的链接是我想要查看的内容。

有人可以帮我解决这个问题吗？

NAVIGATION

<div id="leftReportBar">
    <div id="leftBarContainer">
        <ul id="reportNav" class="ui-sortable">
            <li id="page_1_links">
                <a href="#" class="removePage ss-delete" id="page_1">&nbsp;</a>
                <a class="page" href="#page1">Page 1</a>
            </li>
            <li id="page_2_links">
                <a href="#" class="removePage ss-delete" id="page_2">&nbsp;</a>
                <a class="page" href="#page2">Page 2</a>
            </li>
            <li id="page_3_links">
                <a href="#" class="removePage ss-delete" id="page_3">&nbsp;</a>
                <a class="page" href="#page3">Page 3</a>
            </li>
        </ul>
    </div>
</div>

：定位

<div id="reportContainer" style="height: 224px;" data-spy="scroll">
    <div id="zoomMe">
        <form action="#" id="page1">
            <div id="formPage">
                <!-- CONTENT GOES HERE -->
            </div>
        </form>

        <form action="#" id="page2">
            <div id="formPage">
                <!-- CONTENT GOES HERE -->
            </div>
        </form> 

        <form action="#" id="page3">
            <div id="formPage">
                <!-- CONTENT GOES HERE -->
            </div>
        </form>
    </div>
</div>

Answer 1

如果您向可滚动的div添加data-target以标识导航，该行为可以leftBarContainer还是leftReportBar？

<div id="reportContainer" style="height: 224px;" data-spy="scroll" data-target="#leftBarContainer">

您没有指定您的Bootstrap版本，但在v2.3.2中，我在网站上进行了此操作：

<body data-spy="scroll" data-target=".sidebar">
    <!-- Fixed navbar -->
    <!-- snip -->

    <div class="container">
        <div class="row">
            <!-- Sidebar -->
            <nav class="span3 sidebar hidden-print" role="complementary">
                <ul class="nav nav-list bs-docs-sidenav affix" role="navigation">
                    <li>
                        <a href="#description">Description
                            <i class="icon-chevron-right"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#download">Download
                            <i class="icon-chevron-right"></i>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- Main Content -->
            <div class="span9" role="main">
            </div>
        </div>
    </div>
</body>

可滚动div上的Bootstrap scrollspy

1 个答案: