3

私が必要なものを説明するために最善を尽くす間、私に我慢してください:)

次のように、ページのさらに下のアンカーを指す 3 つのリンクがあります。

<a href="#step1">Step 1</a>に行く<div id="#step1">

<a href="#step2">Step 2</a>に行く<div id="#step2">

<a href="#step3">Step 3</a>に行く<div id="#step3">

だから私がしようとしているのは、私がしようとしている要素を動的にターゲットにすることです。したがって、ステップ 1 のリンクをクリックすると、ステップ 1 の ID を持つ div に移動しますが、jQuery を使用して対象の要素 (ステップ 1 の ID を持つ div) を選択します。

したがって、このスニペットは機能しませんが、正しい道を進んでいると思います:

$(this).effect("highlight", {}, 3000);

...クリックしたリンクが選択されます - 正しくありません! そのリンクでターゲットにしている要素を選択したい。それを得る？今、ハードコーディングできることはわかっていますが、必要なものを動的にターゲットにする方法が必要です。

これが意味をなさない場合は、申し訳ありません。すべてのヘルプとフィードバックをお待ちしております。

ありがとう！

4

3 に答える 3

5 
$($(this).attr('href')).effect("highlight", {}, 3000);

http://jsfiddle.net/b9nub/

PS:値で使用#する必要がないことに注意してください。id

<div id="step1">
于 2012-08-02T21:14:51.993 に答える
2

これが、＃anchorリンクのターゲットをフラッシュするために使用するコードです。ウィキペディアは、脚注をフラッシュするために同様の手法を使用しています。

/**
 * Temporary highlight targets of #anchor links.
 */
$('a').click(function() {
  if (/#(.*)/.test($(this).attr('href'))) {
    var $target = $('#' + RegExp.$1 + ', *[name="' + RegExp.$1 + '"]');
    var repeats = 15;
    function step() {
      repeats--;
      $target[repeats ? 'toggleClass' : 'removeClass']('target');
      if (repeats) {
        window.setTimeout(step, 50);
      }
    }
    step();
  }
});

（スタイルシートに「ターゲット」クラスを追加してスタイルを設定する必要があります。）

ところで、あなたに知らせるために：CSS3だけを使用して、その：target疑似クラスを使用して、ターゲット要素のスタイルを設定することは可能です：

div:target {
  color: red;
}
于 2012-08-02T21:24:59.663 に答える
1

a タグのクリック イベントでは、これは a 要素を参照します。したがって、そのタグから href を取得し、独自のロジックを使用して div を強調表示する必要があると想定しています。

$($(this).attr('href')).effect("highlight", {}, 3000);
于 2012-08-02T21:15:51.093 に答える