jquery - Twitter Bootstrap Scrollspy 在滚动时不起作用

标签 jquery html css ruby-on-rails twitter-bootstrap

我正在测试我的滚动 spy ,但我没有看到它工作。当我滚动时,药丸不会突出显示或“选定”。根据http://getbootstrap.com/javascript/#scrollspy ,我拥有所需的所有 HTML 位,

如果我遗漏了什么或者您想了解更多信息,请随时询问!

application.html:

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

应用程序.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>

最佳答案

这里的问题是您用于 data-target 的值无效,如果您引用类名或 #,它需要 . > 如果您引用 ID。

在这种情况下:

data-target="navbar navbar-default"

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

data-target=".navbar.navbar-default"

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

data-target=".navbar"

检查这个 BottplyDemo 使用正确的代码。

关于jquery - Twitter Bootstrap Scrollspy 在滚动时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26891128/

相关文章:

html - 使用 HTML 和 CSS 在第一个打印页面上显示不同的页眉

php - MySQL 抛出无法执行查询。命令不同步

javascript - 如何从外部 JavaScript 文件访问 HTML 文档中的变量

java - 移动时更改鼠标光标

jquery - 为什么浏览器在使用 jQuery 的多个事件后变得无响应?

html - 如果图像是矩形,文本对齐中心在 Windows Phone 上不起作用

css - 完整日历无法与语义 UI 一起正常工作

javascript - 在页面加载前完成加载条

javascript - 在哪个线程上处理和执行异步请求(如 AJAX 请求)

javascript - Webkit 浏览器不允许我设置 CORS 预检 header