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不起作用

回答

相關問題