0

Twitter のブートストラップ scrollspy に問題があります。私は現在、http://jsfiddle.net/VLBMV/2/で動作させることができます (例を作り直しました)。ただし、それを実際のページに変換すると。ナビゲーションの最後の要素のみをアクティブにします。

** 以下のコードで失敗する実際の例をここで編集します: http://reageek.ca/dev/test.html

これが私のコードです（doctypeを除く）：

<head>
<link rel="stylesheet" href="test.css">
</head>
<body data-spy="scroll" data-target="#navbar">
<div>
    <div id="post1" class="box">
        <h1>Post 1</h1>
    </div>
    <div id="post2" class="box">
        <h1>Post 2</h1>
    </div>
    <div id="post3" class="box">
        <h1>Post 3</h1>
    </div>
</div>
<div id="navbar">
    <ul class="nav">
        <li><a href="#post1">Post 1</a>
        </li>
        <li><a href="#post2">Post 2</a>
        </li>
        <li><a href="#post3">Post 3</a>
        </li>
    </ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#navbar').scrollspy();
});
</script>

また、ここに私のtest.cssの内容があります。ここには派手なものはなく、灰色のボックスだけです

   @import url(http://twitter.github.com/bootstrap/assets/css/bootstrap.css);
.box{
margin: 20px; padding: 15px;
background: #eee;
height: 500px;
}
#navbar{
position: fixed;
bottom: 0; left: 20px;
width: 100%;
background: #fff;
}
.nav li a{
float: left;
width: 80px;
padding: 15px 0;
}
.nav li a:hover{
color: #f33 !important;
background: none;
}
.nav li.active a{
color: #f55;
text-decoration: underline;
}

なぜこれが失敗するのか、誰かが光を当てることができますか? お時間をいただきありがとうございます。

4

1 に答える 1

1

スペルミス？

$('#nabar').scrollspy();

おそらくそうあるべきです

$('#navbar').scrollspy();

私が知る限り、他のすべては問題ないように見えます...フィドルでもスペルミスがあり、まだ機能していますが。

于 2013-04-27T13:15:27.327 に答える