谁能告诉我为什么我的Scrollspy不工作？

I am currently building my own website and trying to implement a bootstrap scrollspy to the site, but I just can't get it to work. Please help me out with this. I will add the code from my test page. This is how far I have progressed:

我目前正在建立自己的网站,并试图实现一个bootstrap scrollspy到网站,但我无法让它工作。这个你能帮我吗。我将从我的测试页面添加代码。这是我取得的进展:

Code:

<!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>

1 个解决方案

#1

You should add bootstrap.min.js, and you should add it (right) after jquery.min.js.

你应该添加bootstrap.min.js,你应该在jquery.min.js之后添加它(右)。

The example below is from W3Schools and as you can see, they have done exactly the same thing.

以下示例来自W3Schools,正如您所看到的,他们完成了同样的事情。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
 body {
  position: relative;
}
#section1 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #1E88E5;
}
#section2 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #673ab7;
}
#section3 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #ff9800;
}
#section41 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #00bcd4;
}
#section42 {
  padding-top: 50px;
  height: 500px;
  color: #fff;
  background-color: #009688;
}

<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#section1">Section 1</a>
            </li>
            <li><a href="#section2">Section 2</a>
            </li>
            <li><a href="#section3">Section 3</a>
            </li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#section41">Section 4-1</a>
                </li>
                <li><a href="#section42">Section 4-2</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <div id="section1" class="container-fluid">
    <h1>Section 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section2" class="container-fluid">
    <h1>Section 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section3" class="container-fluid">
    <h1>Section 3</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section41" class="container-fluid">
    <h1>Section 4 Submenu 1</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <div id="section42" class="container-fluid">
    <h1>Section 4 Submenu 2</h1>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>></script>

</body>

#1