JavaScript - Hide a Div at startup (load)

前端未结

关注

 6  1719

I have a div in my php page that uses jQuery to hide it once the page has loaded. But is there a way to hide it from the very start of loadup?

The reason I ask is be

相关标签:

6条回答

猫巷女王i

2020-12-29 03:37

Why not add "display: none;" to the divs style attribute? Thats all JQuery's .hide() function does.

0 讨论(0)
发布评论:

提交评论
- 加载中...
长情又很酷

2020-12-29 03:40
Barring the CSS solution. The fastest possible way is to hide it immediatly with a script.
```
<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>
```
In this case I would recommend the CSS solution by Vega. But if you need something more complex (like an animation) you can use this approach.

This has some complications (see comments below). If you want this piece of script to really run as fast as possible you can't use jQuery, use native JS only and defer loading of all other scripts.
0 讨论(0)
发布评论:

提交评论
- 加载中...

我寻月下人不归

2020-12-29 03:42

Use css style to hide the div.

#selector { display: none; }

or Use it like below,

CSS:

.hidden { display: none; }

HTML

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

and in jQuery

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

0 讨论(0)

长情又很酷

2020-12-29 03:48

This method I've used a lot, not sure if it is a very good way but it works fine for my needs.

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

0 讨论(0)

感动是毒

2020-12-29 03:53
Using CSS you can just set display:none for the element in a CSS file or in a style attribute
```
#div { display:none; }
<div id="div"></div>



<div style="display:none"></div>
```
or having the js just after the div might be fast enough too, but not as clean
0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2020-12-29 03:54
I've had the same problem.

Use CSS to hide is not the best solution, because sometimes you want users without JS can see the div.. The cleanest solution is to hide the div with JQuery. But the div is visible about 0.5 seconde, which is problematic if the div is on the top of the page.

In these cases, I use an intermediate solution, without JQuery. This one works and is immediate :

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

Of course, you can still add all the effects you want on the div, JQuery toggle() for example. And you will get the best behaviour possible (imho) :
- for non JS users, the div is visible directly
- for JS users, the div is hidden and has toggle effect.
0 讨论(0)
发布评论:

提交评论
- 加载中...