0
私はそのウェブサイトに1ページのウェブサイトを作成していますが、私はscroll-spyとnavbar-collapseを使っていますが、動作していません。ヘッダ内のcdn linkを通してブートストラップとjquery私はこの問題ブートストラップスクロールスパイとnavbar-collapseが動作しない
で私を助けてくださいjsfiddleとなど、jsbinでそれを試みたが、働いていないともFirefoxのインターネットエクスプローラのような別のブラウザを使用してみまし部分は、ここで私はそれが働いてしまった私のコード
<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>
ブートストラップの前にjQueryをロードします。 – makshh
3.0がサポートされていないので、jQueryもダウングレードする必要があります（ '' jquery '： "1.9.1 - 2" '）：[bower.json]（https://github.com/twbs/bootstrap/blob /v3.3.6/bower.json） – vanburen
わかりませんが、あなたのJSスクリプトタグを逆にする必要があると思います。 Jqueryはbootstrap.jsの前にある必要があります。また、ブートストラップjsでエラーがあるようですが、それはバージョン3より低いjqueryに依存します – IndieRok