初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
Core：コアとなる仕組み
Selectors：セレクタ
Attributes：属性
Traversing：対象の変更
Manipulation：操作
CSS：スタイルシート
Events：イベント
Effects：演出効果
Ajax：xml等との連携
Utilities：ユーティリティ
Data：データ
Miscellaneous：諸々
Deferred：処理管理
Callbacks：コールバック
Internals：内部処理

:targetリンク先の要素を選択

構文

リンク先の要素を選択
$(":target")ver1.9〜
※:（コロン）を忘れないように注意しましょう
※ページ内リンクのみ対象です。

機能

:（コロン）に続けてtargetを設定するとリンク先の要素を選択します（ただしページ内リンクのみ）。正確にはアドレスバーの部分に表示されるURIの#以降（つまりID名）で記される要素を選択します。
ページ下部の「メモ」で長々と説明していますが、URIが変更される前に要素を取得する（私にとっては謎の）仕様となっています。

解説

リンク先の要素を選択します

サンプル（target/01.html）を開いてbody内にa要素と、そのリンク先のdiv要素があることを確認して下さい。 

<body>
 	<a href="#test">testへのリンク</a>
	<div id="test">id要素がtestのdiv要素</div>
</body>

続いてjQueryを確認して下さい。以下の様にa要素がクリックされたら:targetセレクタでリンク先の要素を選択し、addclassメソッドを利用してredのクラス属性を追加します。 

$("a").click(function(){
	$(":target").addClass("red");
});

結果として、リンクをクリックするとリンク先の要素（div要素）にredのクラス属性が追加され文字が赤くなります。が...。何故か1回目にクリックした時は無反応で、もう一度クリックして初めて文字が赤くなりました。何故？こういうのに限って本家サイトに1つもサンプルがありません...。

ということで、解説の記事を中断して以下の「メモ」で調べてみました。

メモ

バグ？ワンテンポ遅れる仕様

まず本家サイトでバグ情報を調べてみました。→本家サイトのbug trackerで「:target」を検索
しかし、それらしい情報は見当たりません...。

とすると私の利用方法が間違っているのでしょうか？。:targetはcss3のセレクタにもあるので、参考のためにサンプルを作成しました。サンプル（target/test01.html）を開いてbody内の構成を確認して下さい。以下の様に2組のリンク（a要素）とリンク先（div要素）があります。 

<body>
	<a href="#test">testへのリンク</a>
	<div id="test">id要素がtestのdiv要素</div>
	<a href="#test2">test2へのリンク</a>
	<div id="test2">id要素がtest2のdiv要素</div>
</body>

このサンプルではjQueryは利用していないので、cssを確認してください。以下の様に:targetセレクタを利用し、リンク先の要素の文字を赤くするようにしました。 

:target{
	color:#f00;
}

結果として、リンク（a要素）をクリックすると対応するリンク先のdiv要素の文字が赤くなります。
※css3の:targetはラジオボタンのように直近の要素のみ選択されるのですね（選択されていた要素は赤字が解除される）。

同じような処理をjQueryの:targetを利用して作成してみました。サンプル（target/test01b.html）を開いてbody内の構成がtarget/test01.htmlと同じ事を確認して下さい。

jQueryの:targetセレクタはcss3のと異なりラジオボタンのように選択されていた要素は解除されないので、アラートでid名を表示するように変更しました。以下の様に記述しています。 

$("a").click(function(){
	alert($(":target")[0].id);
});

このサンプルで色々クリックして気が付いたのは、前回クリックした要素のidが表示されるということです。具体的には、最初に「testへのリンク」をクリックした際、前回のクリックは存在しないのでアラートは表示されません。次に「test2へのリンク」をクリックすると前回クリックしたリンクのid「test」が表示されます。これってバグなのですか？

バグなのか仕様なのか分からないので検索して調べた結果「THE HAM MEDIA BLOG」様の記事CSSのとjQueryの「:target」の違いを見つけました。つまりURIが変更される前に要素を選択するため、前回のidが表示されるとのこと。

jQueryのセレクタはcss3のセレクタに沿って作成しているので（たぶん）やはり、この仕様はおかしいように感じます...。でも本家サイトのbug truckerに載っていないし、本家サイトの説明「URIのID部分の要素を選択します」にも反しているとはいえない気もします...。

「THE HAM MEDIA BLOG」様の記事では対応策も紹介していますが、私はこの:targetセレクタの仕様に納得いかないので、:targetセレクタを使わないサンプルを作成してみました。

サンプル（target/test02.html）を開いてbody内の構成がtarget/test01.htmlと同じ事を確認して下さい。そしてリンク（a要素）をクリックすると対応するid名が表示されることを確認して下さい（これまでの:targetのサンプルと異なり#も含んで表示されます）。

この仕組みを利用して、リンク先のdiv要素の文字を赤くするサンプルも作成しました。
サンプル（target/test02b.html）で確認して下さい。jQueryは以下の様に変更されています。 

$("a[href^=#]").click(function() {
	var myHref= $(this).attr("href");
	$(myHref).addClass("red");
});

これはサンプルの「スムーススクロール」で利用しているテクニックなので、詳細を知りたい方は確認してみて下さい。