我正在测试我的滚动 spy ,但我没有看到它工作。当我滚动时,药丸不会突出显示或“选定”。根据http://getbootstrap.com/javascript/#scrollspy ,我拥有所需的所有 HTML 位,
如果我遗漏了什么或者您想了解更多信息,请随时询问!
application.html:
<body data-spy="scroll" data-target="navbar navbar-default">
<%= yield %>
</body>
应用程序.css
body {
position: relative;
}
index.html
<nav class="navbar navbar-default navbar-fixed-top">
<ul id="nav_pills" class="nav nav-pills" role="tablist">
<li role="presentation">
<a href="#about">About</a>
</li>
<li role="presentation">
<a href="#services">Services</a>
</li>
<li role="presentation">
<a href="#portfolio">Portfolio</a>
</li>
<li role="presentation">
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
最佳答案
这里的问题是您用于 data-target
的值无效,如果您引用类名或 #
,它需要 .
> 如果您引用 ID。
在这种情况下:
data-target="navbar navbar-default"
只需提及该元素的两个类名,但您需要确定它是一个类名,以便在 Jquery 函数上传递正确的选择器。它必须是:
data-target=".navbar.navbar-default"
没有空格并带有 .
标识符,就像普通的 Jquery 选择器一样。您还可以将其简化为单个类名:
data-target=".navbar"
检查这个 BottplyDemo 使用正确的代码。
关于jquery - Twitter Bootstrap Scrollspy 在滚动时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26891128/