Jquery 引导滚动间谍和导航栏折叠不工作_Jquery_Html_Css_Twitter Bootstrap

Jquery 引导滚动间谍和导航栏折叠不工作

jquery html css twitter-bootstrap

Jquery 引导滚动间谍和导航栏折叠不工作,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我正在该网站上创建一个单页网站我正在使用scroll spy和navbar collapse，但不起作用我在标题部分通过cdn链接使用bootstrap和jquery我在jsbin、JSFIDLE等中尝试过，但不起作用，还尝试过使用不同的浏览器，如firefox internet explorer请帮助我解决这个问题这是我的密码 <html> <heaad> <title>ScrollSpy</title> <!-- Latest

我正在该网站上创建一个单页网站我正在使用scroll spy和navbar collapse，但不起作用我在标题部分通过cdn链接使用bootstrap和jquery我在jsbin、JSFIDLE等中尝试过，但不起作用，还尝试过使用不同的浏览器，如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">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>


滚动间谍
身体{
保证金：0；
填充：0；
位置：相对位置；
}
#mydv1{
背景色：红色；
}
#mydv2{
背景颜色：绿色；
}
#mydv3{
背景颜色：蓝色；
}
#mydv4{
背景颜色：黄色；
}
#mydv5{
背景色：黑色；
}
.itemdiv{
宽度：100%；
高度：500px；
}
切换导航







你好，世界
项目1
项目2
项目3
项目4
项目5

我让它工作了

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

2）切换JS脚本标记的顺序。Jquery需要在引导之前完成

3）您的

头

标记有输入错误。你写了

heaad

。解决这个问题

4）增加

高度：100%到CSS正文
规则
5） 将id添加到包裹ul.nav的div中
6） 将body标签的数据目标
属性更新为新添加的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>


滚动间谍
身体{
保证金：0；
填充：0；
位置：相对位置；
身高：100%；
}
#mydv1{
背景色：红色；
}
#mydv2{
背景颜色：绿色；
}
#mydv3{
背景颜色：蓝色；
}
#mydv4{
背景颜色：黄色；
}
#mydv5{
背景色：黑色；
}
.itemdiv{
宽度：100%；
高度：500px；
}
切换导航







你好，世界
项目1
项目2
项目3
项目4
项目5
我让它工作了
1） 使用较旧版本的jquery，如2.2.4
2） 切换JS脚本标记的顺序。Jquery需要在引导之前完成
3） 您的头
标记有输入错误。你写了heaad
。解决这个问题
4） 增加高度：100%到CSS正文
规则
5） 将id添加到包裹ul.nav的div中
6） 将body标签的数据目标
属性更新为新添加的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>


滚动间谍
身体{
保证金：0；
填充：0；
位置：相对位置；
身高：100%；
}
#mydv1{
背景色：红色；
}
#mydv2{
背景颜色：绿色；
}
#mydv3{
背景颜色：蓝色；
}
#mydv4{
背景颜色：黄色；
}
#mydv5{
背景色：黑色；
}
.itemdiv{
宽度：100%；
高度：500px；
}
切换导航







你好，世界
项目1
项目2
项目3
项目4
项目5
在引导之前加载jQuery。由于不支持3.0，您还需要降级jQuery（“jQuery”：“1.9.1-2”
），请参阅“不确定”，但我认为您的JS脚本标记需要反转。Jquery必须在bootstrap.js之前。bootstrap js似乎也有一个错误，这取决于jquery低于版本3@IndieRok谢谢mate，但是navbar崩溃仍然不起作用引导前加载jquery。你也需要降级jquery（“jquery”：“1.9.1-2”
），因为3.0不受支持：请参阅“不确定”，但我认为你的js脚本标记需要反转。Jquery必须在bootstrap.js之前。此外，bootstrap js似乎也有一个错误，它依赖于低于版本3@IndieRok的jquery，谢谢mate，但是navbar崩溃仍然不起作用