Javascript 有人能告诉我为什么我的Scrollspy不工作吗？_Javascript_Html_Css_Twitter Bootstrap

Javascript 有人能告诉我为什么我的Scrollspy不工作吗？

javascript html css twitter-bootstrap

Javascript 有人能告诉我为什么我的Scrollspy不工作吗？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我目前正在建立自己的网站，并试图实现一个引导scrollspy到该网站，但我就是不能让它工作。请帮我解决这个问题。我将从测试页面添加代码。这就是我取得的进步：代码：自举基Vorlage 正文{位置：相对；} #测试1{ 高度：1000px；背景颜色：蓝色； } #测试3{ 高度：1000px；背景颜色：绿色； } #测试2{ 高度：1000px；背景色：红色； } 切换导航试验 $（'body'）.scrollspy（{target:'#scrollspytest'}

我目前正在建立自己的网站，并试图实现一个引导scrollspy到该网站，但我就是不能让它工作。请帮我解决这个问题。我将从测试页面添加代码。这就是我取得的进步：

代码：


自举基Vorlage
正文{位置：相对；}
#测试1{
高度：1000px；
背景颜色：蓝色；
}
#测试3{
高度：1000px；
背景颜色：绿色；
}
#测试2{
高度：1000px；
背景色：红色；
}
切换导航
试验




$（'body'）.scrollspy（{target:'#scrollspytest'}）

您应该添加

bootstrap.min.js

，并且应该在

jquery.min.js

之后添加它（右）

下面的例子来自，正如你所看到的，他们做了完全相同的事情

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
身体{
位置：相对位置；
}
#第一节{
填充顶部：50px；
高度：500px；
颜色：#fff；
背景色：#1E88E5；
}
#第2节{
填充顶部：50px；
高度：500px；
颜色：#fff；
背景色：#673ab7；
}
#第三节{
填充顶部：50px；
高度：500px；
颜色：#fff；
背景色：#ff9800；
}
#第41节{
填充顶部：50px；
高度：500px；
颜色：#fff；
背景色：#00bcd4；
}
#第42节{
填充顶部：50px；
高度：500px；
颜色：#fff；
背景色：#009688；
}


















第一节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
第二节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
第三节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
第4节子菜单1
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
第4节子菜单2
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏
>

您的问题是什么？在这里工作良好：这是一个很好的问题，我将再次发布我的全部代码。您必须在jQuery之后加载引导JS文件。

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher  sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
<title>Bootstrap-Basis-Vorlage</title>

<!-- Bootstrap -->
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
    body{position: relative;}
    #test1{
        height: 1000px;
        background-color: blue;
    }
    #test3{
        height: 1000px;
        background-color: green;
    }
    #test2{
        height: 1000px;
        background-color: red;
    }
</style>
<body data-spy="scroll" data-target="#scrollspytest">
  <nav class="navbar navbar-inverse navbar-fixed-top"  role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="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 class="navbar-brand">TEST</div>
        </div>
          <div class="collapse navbar-collapse" id="scrollspytest" >
          <ul id="navleiste"class="nav navbar-nav">
            <li><a id="home"  href="#test1">Home</a></li>
            <li><a id="about" href="#test2">About</a></li>
           </ul>
        </div>
      </div>
    </nav>
    <div id="test1"></div>
    <div id="test2"></div>
<script>
    $('body').scrollspy({ target: '#scrollspytest' })
</script>