Question

我遇到了twitter bootstraps 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;
}

有人能说清楚为什么会失败吗？提前感谢您的时间。

Answer 1

拼写错误？

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

可能应该是

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

据我所知，其他一切看起来都很好......虽然它在小提琴中拼写错误但仍在工作。

Scrollspy：可以在JSfiddle中工作但不能在实际页面上工作吗？

1 个答案: