引导滚动间谍和导航栏崩溃不能正常工作
问题描述：
我创建该网站的一个页面的网站，我使用滚动间谍和导航栏崩溃，但它不工作我在报头中的引导和jQuery通过CDN链接部分我试图在jsbin，和的jsfiddle等但不工作的，并使用不同的浏览器如Firefox，Internet Explorer还试图请帮我解决这个问题引导滚动间谍和导航栏崩溃不能正常工作
这里是我的代码
<html>
<heaad>
<title>ScrollSpy</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<style>
body{
margin: 0 ;
padding: 0;
position: relative;
}
#mydv1{
background-color:red;
}
#mydv2{
background-color:green;
}
#mydv3{
background-color:blue;
}
#mydv4{
background-color:yellow;
}
#mydv5{
background-color:black;
}
.itemdiv{
width: 100%;
height:500px;
}
</style>
</heaad>
<body data-spy="scroll" data-target=".navbar">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">[email protected]@r</a>
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#mydv1">Page 1</a></li>
<li><a href="#mydv2">Page 2</a></li>
<li><a href="#mydv3">Page 3</a></li>
<li><a href="#mydv4">Page 4</a></li>
<li><a href="#mydv5">Page 5</a></li>
</ul>
</div>
</div>
</div>
<h1>Hello World</h1>
<div class="container">
<div id="mydv1" class="itemdiv">item 1</div>
<div id="mydv2" class="itemdiv">item 2</div>
<div id="mydv3" class="itemdiv">item 3</div>
<div id="mydv4" class="itemdiv">item 4</div>
<div id="mydv5" class="itemdiv">item 5</div>
</div>
</body>
</html>
答
我得到它的工作。
1）使用旧版本的jQuery，像2.2.4
2）切换您的JS脚本标签的顺序。 jQuery的需要是引导
3）你head标签有一个错字之前。你写了heaad。修复。
4）添加height:100%;到CSS body规则
5）的ID添加到div包裹ul.nav
6）更新body标签的data-target属性，新添加的ID
有了这个，一切都将工作
Full code：
<html>
<head>
<title>ScrollSpy</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
body{
margin: 0 ;
padding: 0;
position: relative;
height:100%;
}
#mydv1{
background-color:red;
}
#mydv2{
background-color:green;
}
#mydv3{
background-color:blue;
}
#mydv4{
background-color:yellow;
}
#mydv5{
background-color:black;
}
.itemdiv{
width: 100%;
height:500px;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar-example">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">[email protected]@r</a>
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-example" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#mydv1">Page 1</a></li>
<li><a href="#mydv2">Page 2</a></li>
<li><a href="#mydv3">Page 3</a></li>
<li><a href="#mydv4">Page 4</a></li>
<li><a href="#mydv5">Page 5</a></li>
</ul>
</div>
</div>
</div>
<h1>Hello World</h1>
<div class="container">
<div id="mydv1" class="itemdiv">item 1</div>
<div id="mydv2" class="itemdiv">item 2</div>
<div id="mydv3" class="itemdiv">item 3</div>
<div id="mydv4" class="itemdiv">item 4</div>
<div id="mydv5" class="itemdiv">item 5</div>
</div>
</body>
</html>
在引导之前加载jQuery。 – makshh
您还需要降级jQuery（'“jquery”：“1.9.1 - 2”'），因为不支持3.0：请参阅[bower.json]（https://github.com/twbs/bootstrap/blob /v3.3.6/bower.json） – vanburen
不确定，但我认为你的JS脚本标记需要颠倒。 jquery需要在bootstrap.js之前。也似乎有一个引导js错误，这取决于jquery低于版本3 – IndieRok