1

Bootstraps ScrollSpy または「スクロールスパイ」タイプのスクリプトを取得して、という名前のスクロール可能な div#reportContainerで動作させようとしています。

1 つはページを削除するための削除ボタンであるため、タグには 2 つのリンクがあります。クラス.pageとのリンクは、私が見たいものです。

誰でも私がこれを機能させるのを手伝ってくれますか?

ナビゲーション 

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

2 に答える 2

0

data-targetスクロール可能な div にa を追加して、ナビゲーションを識別する場合はどうなるでしょう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>
于 2014-01-22T19:23:12.910 に答える