Phpページにdivがあり、ページが読み込まれたらjQueryを使用して非表示にします。しかし、ロードアップの最初からそれを隠す方法はありますか?
私が尋ねる理由は、ページがロードされているとき、あなたはしばらくの間divを見ることができ、そしてページが完全にロードされたときに非表示になるからです。
プロフェッショナルではないようです。
これの周りに方法があるかどうか疑問に思っていますか?
ありがとう
Cssスタイルを使用して、divを非表示にします。
#selector { display: none; }
または以下のように使用します、
CSS:
.hidden { display: none; }
HTML
<div id="blah" class="hidden"><!-- div content --></div>
およびjQuery
$(function () {
$('#blah').removeClass('hidden');
});
私も同じ問題を抱えています。
CSSを使用して非表示にするのは最適なソリューションではありません。JSを持たないユーザーにdivを表示できる場合があるためです。最もクリーンなソリューションは、JQueryでdivを非表示にすることです。しかし、divは約0.5秒表示されます。これは、divがページの上部にある場合は問題があります。
これらの場合、JQueryを使用せずに中間ソリューションを使用します。これはすぐに動作します:
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<div class="js_hidden">This div will be hidden for JS users, and visible for non JS users.</div>
もちろん、JQueryのtoggle()など、divに必要なすべてのエフェクトを追加できます。そして、あなたは可能な限り最高の振る舞いをするでしょう(imho):
CSSソリューションの禁止。最速の方法は、スクリプトで即座に非表示にすることです。
<div id="hideme"></div>
<script type="text/javascript">
$("#hideme").hide();
</script>
この場合、VegaによるCSSソリューションをお勧めします。ただし、より複雑なもの(アニメーションなど)が必要な場合は、このアプローチを使用できます。
これにはいくつかの問題があります(以下のコメントを参照)。このスクリプトをできるだけ速く実行したい場合は、jQueryを使用できず、ネイティブJSのみを使用し、他のすべてのスクリプトの読み込みを延期します。
「display:none;」を追加しないのはなぜですかdivスタイル属性に?これがJQueryの.hide()関数のすべてです。
この方法はよく使用しますが、それが非常に良い方法であるかどうかはわかりませんが、私のニーズにはうまく機能します。
<html>
<head>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<div id="HiddenStuff1" style="display:none">
CONTENT TO HIDE 1
</div>
<div id="HiddenStuff2" style="display:none">
CONTENT TO HIDE 2
</div>
<div id="HiddenStuff3" style="display:none">
CONTENT TO HIDE 3
</div>
<input id="YOUR ID" title="HIDDEN STUFF 1" type=button name=type value='HIDDEN STUFF 1' onclick="setVisibility('HiddenStuff1', 'inline');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 2" type=button name=type value='HIDDEN STUFF 2' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'inline');setVisibility('HiddenStuff3', 'none');";>
<input id="YOUR ID" title="HIDDEN STUFF 3" type=button name=type value='HIDDEN STUFF 3' onclick="setVisibility('HiddenStuff1', 'none');setVisibility('HiddenStuff2', 'none');setVisibility('HiddenStuff3', 'inline');";>
</body>
</html>
CSSを使用すると、CSSファイルまたはスタイル属性の要素にdisplay:noneを設定できます。
#div { display:none; }
<div id="div"></div>
<div style="display:none"></div>
またはdivの直後にjsを置くことも十分に速いかもしれませんが、それほどきれいではありません