3

ハイライト用にscrollspyを適用したいtwitterブートストラップに基づくナビゲーションメニューバーがあります。通常のphpインクルードを使用してメニューを複数のページにインクルードします。したがって、ファイル名とブックマークを使用してファイルにリンクしています（例：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と一致せず、リンクは強調表示されません。

#スクロールスパイを変更して、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 に答える