Question

我已经按照以下方式实施了Bootstrap 3.0＆rollrspy：

<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。我根本不想更改网址。

我之前在相信的标签中遇到过此问题，如果解决方案是设置data-parent或添加如下点击事件，我就会忘记：

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

添加data-parent相对于scrollspy并不像标签那样，上面的点击事件导致链接无法导航。

提前致谢。

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"用于锚链接到

的容器

防止Bootstrap scrollspy添加URL哈希

1 个答案: