1

私が見つけることができたすべての答えは、display:noneをcssに追加することをお勧めしました...しかし、JavaScriptを使用しないユーザーの場合、要素は表示されません。

jQuery(document).ready(function($){

    $('#toggleElm').hide();

    $('#toggleBtn').click(function(){
        $('#shareLink').slideToggle();
    })

});

最近では、DOM が終了する前にページのレンダリングが開始されるため、ページの読み込み中に表示されたり消えたりする要素が引き続き発生します。

<script type='javascript'> 
    document.write("<style type='text/css'> #toggleElm {display:none} </style>");
</script>

体の上部はハックしすぎているようです。

4

3 に答える 3

1

JavaScript FOUC を防ぎ、ページを完全にアクセスできるようにするには、要素に.no-jsクラスを適用し、<html>そのクラスを使用して要素をスタイルする必要があります。

#toggleElm { display: none; }
.no-js #toggleElm { display: block; }

もちろん、<head>このようなスクリプトを使用して、ドキュメントのすぐにjavascriptを介してそのクラスを削除する必要があります

<script>
    (function(d) { 
        d.className = d.className.replace(/(^|\b)no\-js(\b|$)/, 'js');
    }(document.documentElement));
</script>

したがって、javascript が有効になっている場合は、.no-jsクラスがクラスに変わり.jsます。

このアプローチを使用すると、JavaScript が使用できない場合でもページにアクセスできます。そのシナリオでは、最後の CSS ルールが適用され、要素が表示され、アクセス可能なままになるためです。

于 2012-04-03T15:07:43.743 に答える
0

要素は、終了タグが解析されるとすぐに DOM に登録されます。

したがって、そのタブの直後に要素を非表示にすることができます。

<div id="toggleElm">Foo</div>
<script>
    // Note: No $(document).ready()!
    $('#toggleElm').hide();
</script>

明らかに、これは jQuery が既に読み込まれている (つまり、ページの下部に含まれていない) ことに依存します。この場合は、プレーンな古い JavaScript に戻ります。

<div id="toggleElm">Foo</div>
<script>
    document.getElementById('toggleElm').style.display = 'none';
</script>
于 2012-04-03T14:53:22.507 に答える
0

ドキュメントの準備が整うのを待ちたくない場合は、ドキュメントの準備ができるまで待たないでください。

<p id="foo">Stuff...</p>
<script>
    document.getElementById('foo').style.display = 'none';
</script>
于 2012-04-03T14:55:05.190 に答える