0

我在使用 twitter bootstraps scrollspy 时遇到问题。我目前可以在http://jsfiddle.net/VLBMV/2/上让它工作（重新制作一个例子），这太棒了。但是，当我将其转换为任何类型的实际页面时。它只会使导航中的最后一个元素处于活动状态。

** 此处编辑是一个使用以下代码失败的实时示例： http ://reageek.ca/dev/test.html

这是我的代码（减去文档类型）：

<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 回答