如何使用 scrollspy 制作 Twitter Bootstrap 2.x 导航栏
Posted
技术标签:
【中文标题】如何使用 scrollspy 制作 Twitter Bootstrap 2.x 导航栏【英文标题】：How to make a Twitter Bootstrap 2.x navbar using scrollspy 【发布时间】：2013-06-05 17:10:37 【问题描述】：我想使用 Scrollspy 插件制作一个 Bootstrap 导航栏。当我尝试使用它时，最后一个 <li> 标记始终保持活动状态，但不会让其他 <li> 元素变为活动状态。如果您想要我的代码：http://pastebin.com/raw.php?i=QL99wh2C，这是我正在谈论的图像：http://i.stack.imgur.com/CYzg9.png
【问题讨论】：
【参考方案1】：来自您的来源：
-
在文档顶部添加
<!DOCTYPE html>
body 标签中的data-target 应该包含一个css 选择器。在你的情况下#navbar 或.navbar 而不是导航栏。是。 data-target="#navbar"
看到这个问题：Twitter Bootstrap scrollspy always selecting last element 所以使用：$('body').scrollspy();
-
在页面加载时不选择/激活；将 class="active" 添加到代码的第一个 li 中。或
$('.nav li:first').addClass('active'); 到您的文档底部。
【讨论】：
以上是关于如何使用 scrollspy 制作 Twitter Bootstrap 2.x 导航栏的主要内容，如果未能解决你的问题，请参考以下文章
如何在悬停而不是单击时制作 Twitter Bootstrap 的“拆分按钮下拉菜单”下拉菜单？
Bootstrap 使用 scrollspy 和固定导航添加偏移量