twitter-bootstrap - 防止 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与 scrollspy 不相关，就像标签一样，上面的 click 事件导致链接无法导航。

提前致谢。

Answer 1

好的，通过bootstrap

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

像这样

data-target="#"

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

这是一个工作 fiddle example对困惑感到抱歉! data-target="#navbar"在 anchor 链接到的容器上