防止Bootstrap scrollspy添加URL哈希

Question

我已经实现了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与滚动不相关,就像选项卡一样,上面的点击事件导致链接无法导航.

提前致谢.

Answer 1

好的，它通过引导程序进行

**"To keep URLs intact, use the data-target attribute instead of href="#"."**

像这样

data-target="#"

http://getbootstrap.com/javascript/#dropdowns

这是一个有效的小提琴示例，对于混淆感到抱歉！data-target="#navbar"对于锚链接到的容器