1

次のコードを使用してjQueryを使用してページの読み込み時に要素を選択しようとしています:targetが、何も見つからず、[]. なぜ機能しないのですか？

$(function () {
    var $target = $(':target');
    console.log($target); // []

    if ($target.length) {
        $target.addClass('kbactive');
    }
});

$(':target')ページの読み込み後に手動で実行すると問題なく動作します。なぜすぐに機能しないのですか？

4

5 に答える 5

4

使用する：

location.hash

ターゲットIDを取得するため、要素を取得するには、簡単に実行できます

document.getElementById(location.hash);
于 2012-12-10T13:19:05.437 に答える
2

ドキュメントが完全に読み込まれるまで、：targetは解析されないようです。コードを準備完了ではなくロード時に実行すると、機能します。たぶん、ブラウザ開発チームに尋ねるか、ソースコードをチェックすることができます。

于 2012-12-10T13:48:04.180 に答える
1

:targetあなたが意味する場合：

:target 疑似クラスは、ドキュメントの URI のフラグメント識別子と一致する ID を持つ一意の要素を表します (存在する場合)。

あなたが試すことができます：

$(window.location.hash)

$(':target')正しく動作しない理由は、jQuery API で文書化されておらず、セレクターのエンジンがそれを実行できるかどうかが明確でないためです。

とにかく、アクセスwindow.location.hashしてセレクターとして使用することはまったく同じです。

于 2012-12-10T13:23:31.890 に答える
0

:target疑似セレクターは、jQueryによって公式にサポートされていません。CSS3疑似クラスとをサポートするブラウザでは機能する可能性がありますが、サポートしないブラウザ（IE8 +）では機能しません。:targetquerySelectorAll()

DOM Readyで同じ要素を選択するためのクリーンなクロスブラウザの方法は、次の方法を使用することlocation.hashです。

if(location.hash) {
    var target = $(location.hash); // location.hash already includes the #
}

そうは言っても、 「ハッキーだ」（絶対にそうではない）ためにそれが気に入らない場合は:target、jQueryでセレクターのサポートを自分で追加できます。

$.expr[":"].target = $.expr.createPseudo(function(s)
{
    return function(el)
    {
        if(location.hash)
            return $(el).attr('id') == location.hash.substring(1);

        return false;
    };
});
于 2012-12-10T13:51:42.573 に答える
-1

LeviBotelho の提案を使用するようにコードを変更しました

$(function () {
    var targetID = window.location.hash;
    var $target = $( targetID );
    console.log($target);

    if ($target.length) {
        $target.addClass('kbactive');
    }
});

セレクターとブラウザーの互換性の詳細については、こちら:targetの MDN サイトをご覧ください。

上記は機能しますが、いくつかの警告があります。

Callum Macrae が述べたように、上記は少しハックです。HTML 4 仕様の状態

ID および NAME トークンは文字 ([A-Za-z]) で始まる必要があり、その後に任意の数の文字、数字 ([0-9])、ハイフン ("-")、アンダースコア ("_") を続けることができます、コロン (":")、およびピリオド (".")。

技術的に言えば、ID でコロンを使用できます。コロンが location.hash でエスケープされている%3A場合、上記のソリューションは機能しない可能性があります。

HTML 5 では、これらの制限の多くが解除されており、この問題が発生する可能性はさらに高くなります。詳細はこちら

于 2012-12-10T13:24:56.180 に答える