THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
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

上のデモのリンクをクリックすると、その下のテキストが変化します。しかし、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

#test2

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

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

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

document.querySelectorAll

今回のコードの途中で「if( document.querySelectorAll )」なんてのをいれたのですが、ブラウザで「querySelectorAll」が使えるかどうかを判別しています。使えないIE6やIE7ではそれを入れないとエラーになってしまうので、出ないように今回入れています。

これがどのブラウザでも使えたら楽なんですけどね。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。