Scrollspy: Может ли работать в JSfiddle, но не на реальной странице?

У меня проблема с twitter bootstraps scrollspy. В настоящее время я могу заставить его работать (переделать пример) на http://jsfiddle.net/VLBMV/2/, который является потрясающим. Однако, когда я конвертирую его в фактическую страницу любого типа. Он только активирует последний элемент в навигации.Scrollspy: Может ли работать в JSfiddle, но не на реальной странице?

** Редактировать здесь живой пример того, что провал на код ниже: 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; 
}

Может ли кто-нибудь пролить свет, почему это не удается? Заранее благодарим за ваше время.

источник

2013-04-27 user1452407

Misspelling?

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

, вероятно, должен быть

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

Все остальное выглядит хорошо, насколько я могу сказать ... Хотя это опечатка в скрипку тоже, и до сих пор работает.

источник

2013-04-27 13:15:27 brbcoding

Почему он работает на скрипке, даже если он написан неправильно? – Charlie

woops on spelling my bad Я исправил эту небольшую ошибку. Тем не менее, я все равно получаю одинаковые результаты локально и на сервере, но js скрипка все еще работает. Я действительно не понимаю почему. – user1452407

@ user1452407 Я просто попробовал http://reageek.ca/dev/test.html, и теперь он работает! – brbcoding

Scrollspy: Может ли работать в JSfiddle, но не на реальной странице?

ответ

Смежные вопросы