引導滾動間諜和導航欄崩潰不能正常工作

我創建該網站的一個頁面的網站，我使用滾動間諜和導航欄崩潰，但它不工作我在報頭中的引導和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>

來源

2016-07-07 Mandar Sant

在引導之前加載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

我得到它的工作。

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>

來源

2016-07-07 17:51:38 IndieRok

引導滾動間諜和導航欄崩潰不能正常工作

回答

相關問題