CSSのとjQueryの「:target」の違い

2010/02/27

カテゴリ：: jQuery

タグ：: :target; 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');
        });
    };
});

ｓ

■デモ

test1

#test1

上のデモのリンクをクリックすると、その下のテキストが変化します。しかし、１度目のクリックではCSSの方しか適用されず、jQueryの方は適用されません。２回クリックすることで、ようやく適用されます。

それはなぜか？

それは単純に、$(':target')がURLにハッシュがつく前に見に行ってしまうため、ハッシュないよ～ってことで適用がされないのです。

先にlocationを変更する

では先にURLにハッシュをつけてしまい、その後に実行するようにすればいい。

jQuery(function($){
    if ( document.querySelectorAll ) {
        $('a[href=#test2]').click(function(){
            location.href = this.href;
            $(':target').css('background-color','green');
        });
    };
});

test2

#test2

先にURLが変わるようにしてからCSSを入れることで１回のクリックで、CSSだけでなく、jQueryでのコードも適用されました。

しかし、jQueryの方は、ターゲットが変わってもずっと適用されたままでもあるので、今回のような作りだと、CSSとは同じ動作をしません。

CSSのセレクタの扱いと若干違うようなので、今後使えるようになったら、注意が必要かもしれませんね。