Question

我正在该网站创建一个单页网站我正在使用滚动间谍和导航栏崩溃，但它无法正常使用bootstrap和jquery通过标题部分中的cdn链接我在jsbin，jsfiddle等中尝试过但没有工作，也尝试使用不同的浏览器，如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">IamM@nd@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>

Answer 1

我明白了。

1）使用旧版本的jquery，如2.2.4

2）切换JS脚本标签的顺序。 Jquery需要在bootstrap之前

3）您的head标记有拼写错误。你写了heaad。解决了这个问题。

4）将height:100%;添加到CSS body规则

5）在包裹ul.nav

的div中添加一个id

6）将body标签的data-target属性更新为新添加的ID

有了这个，一切都会起作用

完整代码：

<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">IamM@nd@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>

Bootstrap Scroll-spy和navbar-collapse无法正常工作

1 个答案: