javascript - jQuery には CSS3 に似た :target 疑似クラスがありますか?

Question

jQuery には:targetCSS3 に似た疑似クラスがありますか?

もしそうなら、デモはいいでしょう。

ありがとう！

Answer 1

ビルトイン、私はそうは思いませんが、次のようにジェリーリグすることができます:

$(location.hash);

編集：ありがとう、グラハム！

別の編集: に相当する jQuery の例を次に示し:targetます。window.onhashchange古いブラウザーはイベントを認識しない可能性がありlocation.hash、通常はアンカー タグのonclickイベントのハンドラーの最後で更新されるため (事前に呼び出されない限り、ハンドラー中に jQuery セレクターで新しいハッシュを使用できないようにするlocation.hash = this.href.substring(this.href.indexOf('#'));)、クリップされたhref値を使用する必要があります。代わりにクリックされたアンカーのセレクターとして: http://jsfiddle.net/xPMzV/

Answer 2

と疑似クラスの両方をサポートするブラウザーで動作し、サポートしないブラウザー (IE7 および IE8) ではエラーをスローします。これは、jQuery が利用可能な場合はブラウザーのネイティブを使用し、そうでない場合はシズルセレクター エンジンにフォールバックするためです。厄介なことに、 Sizzle はselectorをサポートしていません。document.querySelectorAll() :targetdocument.querySelectorAll():target

Sizzle は実質的にすべてのCSS 3 セレクターをサポートしています。これには、エスケープされたセレクター (「.foo\+bar」)、Unicode セレクター、ドキュメント順に返される結果など、あまり実装されていない部分も含まれます。CSS 3 セレクターのサポートには、注目すべき例外がいくつかあります (この決定の理由については、こちらを参照してください)。

• ：根
• ：目標
• :nth-last-child
• :nth-of-type / :nth-last-of-type / :first-of-type / :last-of-type / :only-of-type
• :言語()

sizzle は をサポートしていないため:target、jQuery を古いブラウザーで使用するとエラーがスローされます。

このページをさまざまなブラウザーで試してください: http://jsfiddle.net/gilly3/NPNFg/

:target幸いなことに、自分でセレクターを追加するのは簡単です。

$.expr[":"].target = function (node) {
    var t = location.hash.substr(1);
    return t && node.id == t || node.name == t;
}

実際のデモ: http://jsfiddle.net/gilly3/NPNFg/3/

編集: IE7 と IE8 でスタイル定義:targetを複製し、. ルール定義のセレクターで疑似クラスを使用しようとすると、IE8 がチョークし、ルールをまったく解析しないため、定義全体を複製する必要があることに注意してください。スタイルを複製した後、hashchangeプラグインを使用し、次のコードを使用します。:target:target.target:target

$(function () {
    try {
        $(":target");
    }
    catch (err) {
        $.expr[":"].target = function (node) {
            var t = location.hash.substr(1);
            return t && node.id == t || node.name == t;
        }
        $(window).hashchange(function () {
            $(".target").removeClass("target");
            $(":target").addClass("target");
        });
    }
});

あなたの jsfiddleから適応した動作デモ: http://jsfiddle.net/gilly3/c9BvU/6/

Answer 3

簡単です。

   $(window.location.hash)