Question

我正在测试我的卷轴，但我认为它不起作用。当我滚动时，药片不会突出显示或＆＃34;选择＆＃34;。根据{{3}}，我需要所有HTML位，

如果我遗失任何内容或您想了解更多信息，请随时提出来！

application.html：

<body data-spy="scroll" data-target="navbar navbar-default">
<%= yield %>
</body>

application.css

body {
    position: relative;
}

的index.html

  <nav class="navbar navbar-default navbar-fixed-top">
    <ul id="nav_pills" class="nav nav-pills" role="tablist">
      <li role="presentation">
        <a href="#about">About</a>
      </li>
      <li role="presentation">
        <a href="#services">Services</a>
      </li>
      <li role="presentation">
        <a href="#portfolio">Portfolio</a>
      </li>
      <li role="presentation">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

Answer 1

此处的问题是，data-target使用的值无效，如果引用类名则需要.，如果引用ID，则需要#。

在这种情况下：

data-target =“navbar navbar-default”

只需提及元素的两个类名，但您需要确定它是一个类名，以便在Jquery函数上传递正确的选择器。必须是：

数据目标= “navbar.navbar默认”

没有空格和.标识符，就像普通的Jquery选择器一样。您还可以将其简化为单个类名：

数据目标= “导航栏”

使用正确的代码检查此 BottplyDemo 。

Answer 2

我自己是Bootstrap的新手，但它看起来基于你需要用javascript调用scrollspy的文档。除非你刚刚离开你的例子。

$('body').scrollspy({ target: '.navbar-example' })

Twitter Bootstrap Scrollspy在滚动时无法正常工作

2 个答案: