web-dev-qa-db-ja.com

JavaScript-起動時にDivを非表示（ロード）

Phpページにdivがあり、ページが読み込まれたらjQueryを使用して非表示にします。しかし、ロードアップの最初からそれを隠す方法はありますか？

私が尋ねる理由は、ページがロードされているとき、あなたはしばらくの間divを見ることができ、そしてページが完全にロードされたときに非表示になるからです。

プロフェッショナルではないようです。

これの周りに方法があるかどうか疑問に思っていますか？

ありがとう

javascriptjquerycsshtmlhide
37
Oliver Jones

Cssスタイルを使用して、divを非表示にします。

#selector { display: none; }

または以下のように使用します、

CSS：

.hidden { display: none; }

HTML

<div id="blah" class="hidden"><!-- div content --></div>

およびjQuery

 $(function () {
     $('#blah').removeClass('hidden');
 });
76
Selvakumar Arumugam

私も同じ問題を抱えています。

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）：

  • 非JSユーザーの場合、divは直接表示されます
  • jSユーザーの場合、divは非表示でトグル効果があります。
7
David G

CSSソリューションの禁止。最速の方法は、スクリプトで即座に非表示にすることです。

<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

この場合、VegaによるCSSソリューションをお勧めします。ただし、より複雑なもの（アニメーションなど）が必要な場合は、このアプローチを使用できます。

これにはいくつかの問題があります（以下のコメントを参照）。このスクリプトをできるだけ速く実行したい場合は、jQueryを使用できず、ネイティブJSのみを使用し、他のすべてのスクリプトの読み込みを延期します。

7
Halcyon

「display：none;」を追加しないのはなぜですかdivスタイル属性に？これがJQueryの.hide（）関数のすべてです。

1
Moo

この方法はよく使用しますが、それが非常に良い方法であるかどうかはわかりませんが、私のニーズにはうまく機能します。

<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>
1
John

CSSを使用すると、CSSファイルまたはスタイル属性の要素にdisplay：noneを設定できます。

#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>

またはdivの直後にjsを置くことも十分に速いかもしれませんが、それほどきれいではありません

0
GillesC