3

このページでは > http://canvas.clickbump.com/example/

ページ上のいくつかの非表示のアンカー要素を対象とするハイパーリンクを含む、フローティング「目次」ボックスがあります。

<a id="anchor1">This is anchor 1</a>

と

<a id="anchor2">This is anchor 2</a>

ボックスのマークアップ:

<details class="cb-toc" open="open">
    <summary>Table of Contents</summary>
    <ol>
        <li><a href="#top">GoTo Top</a></li>
        <li><a href="#anchor1">GoTo Anchor 1</a></li>
        <li><a href="#anchor2">GoTo Anchor 2</a></li>
    </ol>
</details>

以下のjQueryスクリプトを使用して、TOCのリンクのクリックをバインドして、フローティングボックスをターゲットアンカーに隣接する位置に移動しようとしています。ただし、そのヒットまたはミス。ボックスを適切な位置に移動するには、アンカーを 2 回クリックします。

私が使用しているjQueryは次のとおりです。

jQuery('.cb-toc a').on('click',foo);
function foo(){
    jQuery('a:target').after(jQuery('.cb-toc'));
}

毎回最初のクリックでボックスを適切な位置に移動するために何ができるか考えていますか?

4

2 に答える 2

2

クリック ハンドラーが実行されるとき、新しいターゲットはまだ設定されていません。後で発生します。そのため、TOC は常に前のターゲットの隣に配置されます (同じリンクを 2 回クリックしても問題なく動作します)。

setTimeout()TOC 配置の実行を遅らせるために使用するかonhashchange、ブラウザーが新しいターゲットを設定するときに発生するイベントをリッスンすることができます。または、単にアプローチをあきらめて:target、次のように正しいアンカーを自分で見つけることもできます。

function foo() {
     //hash will be something like #top
     var hash = this.hash;

     //wait, it looks like an ID selector :)
     jQuery(hash).after(jQuery('.cb-toc'));
}

jsFiddle デモ

何らかの作業が必要になる場合があります。そのため、hash変数はすべてのブラウザーで常に適切な値を保持します ( #whatever)。そのため、この例は実稼働対応のコードではなく、単なる説明です。

于 2013-01-25T01:19:16.177 に答える
2

正しいアンカーを手動で選択します。

jQuery('.cb-toc a').click(function(e){
    var str = jQuery(this).attr('href');
    jQuery(str).after(jQuery('.cb-toc'));
}
于 2013-01-25T01:28:10.577 に答える