使用url和hash with bootstrap scrollspy

Question

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

但是scrollspy希望url工作的方式是使用这种格式<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在代码中有类似正则表达式检查器的内容将失败.但如果你事先修剪它会起作用

在滚动间谍引导代码中,您可以更改(在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 + '"]'

可以解决你的问题