想在 Bootstrap 中使用带有分页的 scrollspy

Question

正如标题所说，我想在 Bootstrap 中使用带有分页的 scrollspy，但 activate.bs.scrollspy 似乎不起作用。

这是我的 html 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
  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;}

  </style>
  </head>

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

    <nav class="navbar-fixed-bottom">
      <ul class="pagination">
        <li><a href="#section1">1</a></li>
        <li><a href="#section2">2</a></li>
        <li><a href="#section3">3</a></li>
      </ul>
    </nav>

    <div class="container">
        <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>

    <script src="../jquery/jquery-2.1.4.min.js"></script>
    <script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $('.navbar-fixed-bottom').on('activate.bs.scrollspy', function () {
        alert("rg");
      });
    </script>
  </body>
</html>

Bootstrap 说 scrollspy 与 nav 一起工作，而我的分页是 nav，那为什么呢？这是一种让它发挥作用的方法吗？

提前致谢。

Answer 1

在寻呼机 ul 上放置 class“.nav”，因为它在搜索 "target (which is .navbar-fixed-bottom) + .nav li > a "

的插件构造函数中被硬编码

function ScrollSpy(element, options) {
...
this.selector       = (this.options.target || '') + ' .nav li > a'
...

所以它会给我们“.navbar-fixed-bottom .nav li>a”

working demo

想在 Bootstrap 中使用带有分页的 scrollspy

Want to use a scrollspy with pagination in Bootstrap

pagination

twitter-bootstrap

scrollspy