CSSのとjQueryの「:target」の違い
先日ご紹介したjQueryでも一部のブラウザで利用できるようになったCSS3のセレクタ「:target」。jQueryで使うことはまだまだない現状ですが、試しに使ってみました。
ところがCSSで使う時と違い、jQueryで使う場合は一工夫必要かな?なんて思ったので、まとめてみます。
「:target」が適用されるタイミングは?
このセレクタは、ページのURLに「#」以下がついた時に、そのハッシュが示す箇所が選択され適用されるようになります。
しかし、JavaScriptで扱う場合は、適用させるタイミングを考える必要があるようです。
例えば下で紹介するサンプルを見て下さい。
■サンプルHTML
<p><a href="#test1">test1</a></p>
<p id="test1">#test1</p>
<p><a href="#test2">test2</a></p>
<p id="test2">#test2</p>
それぞれaタグの下にhrefで指定したidをおいています。
■サンプルCSS
:target{
color:red;
font-weight:bold;
}
#test1:target{
color:blue;
font-weight:bold;
}
■サンプルコード
jQuery(function($){
if ( document.querySelectorAll ) {
$('a[href=#test1]').click(function(){
$(':target').css('background-color','green');
});
};
});
s
■デモ
#test1
上のデモのリンクをクリックすると、その下のテキストが変化します。しかし、1度目のクリックではCSSの方しか適用されず、jQueryの方は適用されません。2回クリックすることで、ようやく適用されます。
それはなぜか?
それは単純に、$(':target')がURLにハッシュがつく前に見に行ってしまうため、ハッシュないよ〜ってことで適用がされないのです。
先にlocationを変更する
では先にURLにハッシュをつけてしまい、その後に実行するようにすればいい。
jQuery(function($){
if ( document.querySelectorAll ) {
$('a[href=#test2]').click(function(){
location.href = this.href;
$(':target').css('background-color','green');
});
};
});
#test2
先にURLが変わるようにしてからCSSを入れることで1回のクリックで、CSSだけでなく、jQueryでのコードも適用されました。
しかし、jQueryの方は、ターゲットが変わってもずっと適用されたままでもあるので、今回のような作りだと、CSSとは同じ動作をしません。
CSSのセレクタの扱いと若干違うようなので、今後使えるようになったら、注意が必要かもしれませんね。
document.querySelectorAll
今回のコードの途中で「if( document.querySelectorAll )」なんてのをいれたのですが、ブラウザで「querySelectorAll」が使えるかどうかを判別しています。使えないIE6やIE7ではそれを入れないとエラーになってしまうので、出ないように今回入れています。
これがどのブラウザでも使えたら楽なんですけどね。