Question

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

但是scrollspy希望网址工作的方式是使用格式<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。

Answer 1

新答案

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

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

（2）Bootstrap使用导航链接中的href或data-target来查找页面上的目标区域。如果您有products.php#my-catalogue之类的内容，代码中的正则表达式检查程序将失败。但是如果你事先修剪它会起作用

在滚动间谍引导程序代码中，您可以更改（在＆＃34;刷新＆＃34; 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>

应该没问题

旧答案

也许您可以尝试在bootstrap 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

添加data-target =“＃target”非常有效。我在服务子页面中使用它。这是一个有效的例子：

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

访问者可以非常顺利地浏览链接到其他页面的服务列表。

使用url和hash with bootstrap scrollspy

2 个答案: