7

Bootstrap 3.0 の scrollspy を次のように実装しました。

<nav id="navProposalPreview">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#previewTitlePage">Title Page</a></li>
        <li><a href="#previewDisplay">Display</a></li>
        <li><a href="#previewAddlServices">Additional Services</a></li>
    </ul>
</nav>
<div class="modal-body">
    <div>
        <p id="previewTitlePage"></p>
        <div>Stuff</div>
        <p id="previewDisplay"></p>
        <div>Other stuff</div>
        <p id="previewAddlServices"></p>
        <div>Last stuff</div>
    </div>
</div>

私は次のように初期化しています:

$('.modal-body').scrollspy({ target: '#navProposalPreview', offset: 20 });

liスクロールすると期待どおりにアクティブに設定され、リンクを使用してセクションに移動することもできます。問題は、リンクをクリックすると、リンクが URL にハッシュとして追加されることです。mysite.com/#previewDisplay. URLをまったく変更したくありません。

data-parent以前にタブでこれに遭遇したことがあり、解決策が次のようなクリックイベントを設定するか追加するかを忘れてしまいました:

$previewModal.find('#navProposalPreview a').on('click', function (e) {
    e.preventDefault();
    return false;
});

追加data-parentは、タブの場合のように scrollspy に関連するものではなく、上記のクリックイベントにより、リンクがナビゲートされなくなります。

前もって感謝します。

4

1 に答える 1