Question

大家好我正在使用bootstrap scroll spy。当我点击链接时，它会将我带到特定部分，但我面临的问题是，当我向上或向下滚动时，选项不会变为活动状态。我不知道为什么我会遇到这个问题。请帮忙。这是我的代码。我

<div id="buyer_guide" data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  <div  class="col-lg-6 ">
    <div id="content ">
      <section id="section-1">
        <div class="content">
          <h2>Section 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
          <hr />
          <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> </div>
      </section>
      <section id="section-2">
        <div class="content">
          <h2>Section 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
          <hr />
          <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> </div>
      </section>
    </div>
  </div>
  <div class="col-lg-3">
    <nav id="myScrollspy" >
      <ul>
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2">Section 2</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer 1

我已经解决了你的问题。这是解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<div id="buyer_guide">
  <div class="row">
    <div  class="col-lg-6 ">
      <div id="content ">
        <section id="section-1">
          <div class="content">
            <h2>Section 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
            <hr />
            <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> </div>
        </section>
        <section id="section-2">
          <div class="content">
            <h2>Section 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
            <hr />
            <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> </div>
        </section>
      </div>
    </div>
    <div class="col-lg-offset-3 col-lg-3">
      <nav id="myScrollspy">
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#section-1">Section 1</a></li>
          <li><a href="#section-2">Section 2</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

</body>
</html>

您应该将 .nav 类添加到nav中的ul元素， .active 类中作为默认列表项之一，set data-spy =“scroll “data-target =”＃myScrollspy“data-offset =”20“属性为正文标记而非 #buyer_guide div，请您确定全部添加下面的JS和CSS文件：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap ScrollSpy

1 个答案: