Что мне не хватает, чтобы заставить ScrollSpy работать?

Я скопировал файлы из http://jsfiddle.net/ia_archiver/9AgUS/ как таковой:Что мне не хватает, чтобы заставить ScrollSpy работать?

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<title>MWE Scrollspy</title> 
<link rel="stylesheet" type="text/css" href="/path/to/scrollspy.css" /> 
</head> 

<body data-spy="scroll" data-target="#navbar"> 
    <div id="post1" class="box"> 
     <h1>Post 1</h1> 
     <p> Scroll Down?</p> 
    </div> 
    <div id="post2" class="box"><h1>Post 2</h1></div> 
    <div id="post3" class="box"><h1>Post 3</h1></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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script> 
</body> 
</html>

в scrollspy.html, а также:

@import url(http://getbootstrap.com/2.3.2/assets/css/bootstrap.css); 
html{ background: #fff;} 
.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; 
}

в scrollspy.css.

Я не вижу, чего мне не хватает, хотя функция ScrollSpy не работает (хотя все CSS все в порядке).

Можете ли вы помочь мне определить, что мне явно не хватает? Большое спасибо!

UPDATE 2015-04-02: Вот что я получаю на консоли:

HTML1406: Invalid tag start: "<?". Question marks should not start tags. 
scrollspy.html, line 1 character 2 
HTML1524: Invalid DOCTYPE. The shortest valid doctype is "<!DOCTYPE html>". 
scrollspy.html, line 2 character 1 
SCRIPT1002: Syntax error 
bootstrap-scrollspy.js, line 1 character 1

Не то явно - по крайней мере, для меня.

источник

2015-04-01 user3341592

У вас есть что-нибудь в консоли? –

Вам нужно будет ссылаться на файл javascript bootstrap (по крайней мере, от CDN). Ссылка на скрипт относится к старому файлу, размещенному в github, который теперь перенаправляется на домашнюю страницу начальной загрузки вместо js-файла для scrollspy.

Официальный CDN:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

JS Fiddle: http://jsfiddle.net/9AgUS/1736/

источник

2015-04-02 12:30:44

Могу я просто игнорировать первые 2 предупреждения с консоли? – user3341592

Что мне не хватает, чтобы заставить ScrollSpy работать?

ответ

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