个人中心
gpt4 book ai didi

jquery - Bootstrap Scroll-spy 和 navbar-collapse 不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 10:02:30 24 4
gpt4 key购买 nike

我正在该网站上创建一个单页网站 我正在使用 scroll-spy 和 navbar-collapse 但它不起作用 我正在通过标题部分的 cdn 链接使用 bootstrap 和 jquery 我在 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">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>

最佳答案

我成功了。

1) 使用旧版本的 jquery，比如 2.2.4

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

3) 你的 head 标签有错字。你写了 head。解决这个问题。

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

5) 添加一个 id 到包装 ul.nav

的 div

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>

关于jquery - Bootstrap Scroll-spy 和 navbar-collapse 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38251285/

24 4 0
文章推荐： java - 如何创建带有执行选项的 Jar 文件？
文章推荐： linux - 包装器 cpp 文件中的 libfreenect cmake 错误
文章推荐： c - char的返回链 - C中的getgrouplist
文章推荐： html - 链接在左右浮动但在高度居中对齐的菜单
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com