让 ScrollSpy 工作我缺少什么?
What am I missing to make ScrollSpy work?
我已经从 http://jsfiddle.net/ia_archiver/9AgUS/ 复制了这些文件:
<?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 都可以),但我没有看到我遗漏了什么。
你能帮我找出我明显遗漏了什么吗??非常感谢!
更新 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
没那么明确——至少对我来说是这样。
您必须引用 bootstrap javascript 文件(至少来自 CDN)。您的脚本引用是旧的 github 托管文件,现在是重定向到 bootstrap 主页,而不是 scrollspy 的 js 文件。
官方CDN:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
JS Fiddle: http://jsfiddle.net/9AgUS/1736/
我已经从 http://jsfiddle.net/ia_archiver/9AgUS/ 复制了这些文件:
<?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 都可以),但我没有看到我遗漏了什么。
你能帮我找出我明显遗漏了什么吗??非常感谢!
更新 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
没那么明确——至少对我来说是这样。
您必须引用 bootstrap javascript 文件(至少来自 CDN)。您的脚本引用是旧的 github 托管文件,现在是重定向到 bootstrap 主页,而不是 scrollspy 的 js 文件。
官方CDN:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
JS Fiddle: http://jsfiddle.net/9AgUS/1736/