4

以下は、私がやろうとしていることを示す簡単なテスト ケースです。

<html>
<head>
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $(":target").css('color', 'red');
});
</script>
<ul>
    <li id="one">One</li>
    <li id="two">Two</li>
    <li id="three">Three</li>
</ul>
</body>
</html>

アイデアは、何かがターゲットにされたときに、jQuery/Javascript を介してターゲットにされた項目に対して何かを行うことです (たとえば、test.html#two)。

これは、Firefox と IE 10 では期待どおりに機能しますが、Chrome、Opera、Safari では機能しません。これは一部のブラウザーのバグなのか、私がやろうとしていることが何らかの形で間違っているのか、それとも私が' 仕様またはその他の不十分に正確な部分に違反しました。

jQueryコードを変更すると

alert($(":target").length);

Chrome、Opera、および Safari は document.ready() 中に :target 要素を見つけることができませんが、後で同じコードを (コンソールまたはクリック イベントに関連付けられた関数を介して) 呼び出すと、要素が見つかります。

:target はいつ JS からアクセスできるようになりますか?

4

5 に答える 5

3

これはコメントとして投稿されましたが、後で削除されました。ウィンドウの読み込みイベントを待つことができます:

$(window).on('load hashchange', function(){
    $(':target').css('color', 'red');
});

これはChromeでさまざまな結果をもたらしました。ページの更新（F5）を実行すると機能しましたが、アドレスバーにEnterキーを押したときは機能しませんでした。

セレクターを使用してページの読み込み時にこれを正しく処理する方法があるかどうかはわかりませんが、:targetいつでもハッシュ値を取得してセレクターとして使用できます。

$(window).on('load hashchange', function(){
    var target = window.location.hash;
    $(target).css('color', 'red');
});

アップデート

私はこの問題についていくつかの調査といくつかのテストを行ってきましたが、共有する洞察がいくつかあります。

まず、$(':target')内部で jQueryを呼び出すと、querySelectorAll(':target')これは疑似クラスの CSS 仕様に直接関係しているということを理解する必要がありますが、なぜ内部で機能しないのdocument.ready()でしょうか?

コードを内部でラップすると、setTimeout(fn,0)実際にセレクターが使用可能になることがわかりました。

$(document).ready(function(){
    setTimeout(function(){
        $(':target').css('color', 'red'); //THIS WORKS
    },0);
});

ゼロミリ秒のタイムアウトを追加すると実際にどのように違いが生じるかについては、この回答を参照してください。クエリ)。Firefox はどうにかして内部プロセスを異なる方法で管理していると思います。そのため、コードはタイムアウトを必要とせずに動作します。

:targetまた、jQuery の内部シズル セレクター エンジンが、CSS疑似クラスをサポートしていないブラウザーにフォールバックを提供することも発見しました。これは内部document.ready()で問題なく使用できます。

$(document).ready(function(){
    $(':target()').css('color', 'red');
});

これは、CSS クラスに依存する代わりに、window.location オブジェクトの hash プロパティを使用する JavaScript 実装であるため、内部的に次のように定義されているため機能します。

"target": function( elem ) {
        var hash = window.location && window.location.hash;
        return hash && hash.slice( 1 ) === elem.id;
    }

注意すべき唯一の考えは、この関数が のようなセレクターを渡されない場合、ページ上のすべての要素を通過するという:target(div)ことです。

于 2013-08-22T04:53:25.277 に答える
0

あなたの例 (ステートメントなど) には特別なロジックがないのでif、CSS でスタイルを設定してみませんか? :target疑似クラスはCSS3セレクターです。

:target {
    color: red;
}

これは、最新のすべてのブラウザー、および一部の非常に古いブラウザー (たとえば、Chrome 1 および Firefox 1.3) でも機能しますが、Internet Explorer ではバージョン 9 以降でのみサポートされることに注意してください。

必要に応じて両方の場所 (CSS と JavaScript) で実行することもできますが、特に IE <= 8 との互換性が必要でない限り、JavaScript は冗長に見えます。

IE <= 8 のサポートを維持する jQuery バージョン 1.10.1 を使用していることに気付きました。それは重要ですか? そうでない場合は、jQuery 2.0.2 (執筆時点での最新バージョン) に移行することもできます。

于 2013-08-22T04:23:56.673 に答える
0

スタイリング作業にcss3ターゲットセレクターを使用できます

:target
{
 color:red;
}
于 2013-08-22T04:15:45.020 に答える