Question

所以我正在学习W3schools的bootstrap scrollspy，我决定按照W3schools的指示尝试自己做一个。颜色和链接工作正常，但scrollspy不起作用。我尝试将我的代码与W3schools中的代码进行比较。

＆＃13;

body {
      position: relative; 
}

＆＃13;

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>




<body>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-md bg-warning navbar-warning fixed-top">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#s1">Section 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#s2">Section 2</a></li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" id="d1">Section 3</a>
      <div class="dropdown-menu">
         <a class="dropdown-item" href="#s3a">Section 3a</a>
         <a class="dropdown-item" href="#s3b">Section 3b</a>
      </div>
    </li>
  </ul>
</nav>

<div id="s1" class="container-fluid bg-primary" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 1</h1>
  <p>Construct paragraph here</p>
</div>

<div id="s2" class="container-fluid bg-secondary" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 2</h1>
  <p>Construct paragraph here</p>
</div>
<div id="s3a" class="container-fluid bg-danger" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 3a</h1>
  <p>Construct paragraph here</p>
</div>
<div id="s3b" class="container-fluid bg-info" style="padding-top:100px;padding-bottom:100px;">
  <h1>Section 3b</h1>
  <p>Construct paragraph here</p>
</div>









</body>

＆＃13;

因此，当您滚动到某个部分时，scrolllspy（将链接文本以白色着色的效果）在此处不起作用，链接文本仍然只是蓝色文本。我在这里错过了什么吗？

提前谢谢大家：）

Answer 1

您在链接标记中有语法错误。

  <a class="nav-link" dropdown-toggle” href="" data-toggle="dropdown" id="d1">Section 3</a>
  <div class="dropdown-menu">

您也可以使用jquery和javascript

来完成此操作

   $("body").scrollspy({target: ".navbar-fixed-top"})

希望我有所帮助：）

缺少scrollspy的代码？

1 个答案: