Bootstrap Scrollspy不起作用

我想实现一个固定的侧面菜单，更新活动类的活动页面链接。我将滚动间谍HTML5元素放在body上，但我遇到了问题。有人可以检查我的网页，看看他们是否可以确定有什么问题吗？Bootstrap Scrollspy不起作用

http://mattaltepeter.com/new/about.shtml

2013-03-08 Matt Altepeter

的问题是，你已经把一个div内，比使用导航id来滚动你的资产净值。为了使scrollspy工作，你可以将“边导航”到span3格状：的jsfiddle demo in browser

<div class="row"> 
<div class="span3" id="side-nav"> 
    <ul class="nav nav-list about-list hidden-phone hidden-tablet affix" > 
     <li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li> 
     <li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li> 
     <li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li> 
     <li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li> 
    </ul> 
</div>

您可以创建通过以下方式您对部分：

<div class="page-header" id="about"> 
     <h1 >About Me</h1> 

    <p>My name is Matt Altepeter. I am 21 years old .</p> 
    </div>

请删除脚本初始化滚动，因为你已经将它们添加到身体

<body data-offset="50" data-target="#side-nav" data-spy="scroll">

它很好的做法，只是一个声明bootstrap.js在jQuery之前和任何其他脚本之前。将所有脚本放在页脚中，有助于节省加载时间。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

来源

2013-03-08 11:17:32 Shail

啊谢谢。这使它大部分工作。现在唯一的问题是加载页面时，即使我在第一个项目上手动分配'class =“active”'，菜单上的最后一项默认高亮显示。有什么建议么？ – 2013-03-08 13:54:07

问题出在您的脚本部分，您正在使用的JavaScript来添加活动类。 – Shail 2013-03-09 00:50:39

我删除了脚本标记中的所有内容，但初始化滚动条时它仍将页面加载时最后一个导航项设置为活动状态。 – 2013-03-09 21:51:42

Bootstrap Scrollspy不起作用

回答

相关问题