将 URL 和哈希与 bootstrap scrollspy 一起使用

Question

我有一个基于推特引导程序的导航菜单栏，我想将scrollspy应用于突出显示。 我使用普通的 PHP 包含将菜单包含在多个页面中。 因此，我使用文件名和书签链接到文件（例如产品.php#foo）。

但是 ScrollSpy 希望 URL 工作的方法是使用格式 <a href="#id-of-target">my link</a> ，这样当<div id="id-of-target">滚动到视图中时，HRf 会根据 HREF 属性进行匹配，并获得活动类放在上面。

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

我无法弄清楚如何修改 ScrollSpy，使其仅在 href 值中#后的 id 上匹配。

Answer 1

新答案

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

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

（2） Bootstrap 在导航链接中使用您的 href 或数据目标来查找页面上的目标区域。如果您有类似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 + '"]'

可以解决您的问题

Answer 2

添加数据目标="#target"效果很好。我在服务子页面中使用它。下面是一个工作示例：

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

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