3

我有一个基于 twitter bootstrap 的导航菜单栏，我想将 scrollspy 应用于高亮显示。我使用普通的 php 包含将菜单包含到多个页面中。因此，我使用文件名和书签（例如 products.php#foo）链接到文件。

但是 scrollspy 希望 url 工作的方式是使用 format <a href="#id-of-target">my link</a>，这样当<div id="id-of-target">滚动到视图中时，href 会根据 href 属性匹配并获取活动类。

这意味着如果我有一个这样的链接<a href="products.php#my-catalogue">my catalogue</a>，它将与 id 不匹配，并且链接不会突出显示。

我不知道如何修改scrollspy，以便它只匹配#href值中的id。

4

2 回答 2

14

新答案

(1) 您可以像这样向链接添加数据目标：

<a href="products.php#my-catalogue" data-target="#my-catalogue">my catalogue</a>

(2) Bootstrap 在导航链接中使用您的 href 或 data-target 来查找页面上的目标区域。如果您products.php#my-catalogue在代码中有诸如正则表达式检查器之类的东西，则会失败。但是，如果您事先进行修剪，它将起作用

在滚动间谍引导代码中，您可以更改（在 ScrollSpy 的“刷新”功能中）：

.map(function () {
    var $el = $(this)
              , href = $el.data('target') || $el.attr('href')
              , $href = /^#\w/.test(href) && $(href)

至

.map(function () {
    var $el = $(this)
              , href = $el.data('target') || $el.attr('href')
              , trimmed = href.match(/#\w*/)[0]
              , $href = /^#\w/.test(trimmed) && $(trimmed)

然后有类似的东西

<a href="products.php#my-catalogue">my catalogue</a>

应该没有问题

旧答案

也许您可以尝试在引导 js 代码中编辑滚动间谍选择器？

有一条线（对我来说大约是 1442）：

selector = this.selector
      + '[data-target="' + target + '"],'
      + this.selector + '[href="' + target + '"]'

如果改为

 selector = this.selector
      + '[data-target="' + target + '"],'
      + this.selector + '[href="products.php' + target + '"]'

可以解决你的问题

于 2012-10-05T03:40:54.247 回答
2

添加 data-target="#target" 效果很好。我在服务子页面中使用它。这是一个工作示例：

http://calebserna.com/services/web-design/

访问者可以非常流畅地浏览链接到另一个页面的服务列表。

于 2014-02-22T07:17:36.350 回答