JavaScript - 在启动时隐藏 Div（加载）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10148660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript - Hide a Div at startup (load)
提问by Oliver Jones
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?
我的 php 页面中有一个 div，它在页面加载后使用 jQuery 隐藏它。但是有没有办法从加载一开始就隐藏它？
The reason I ask is because for a brief second, you can see the div when the page is loading, and then hides when the page is fully loaded.
我问的原因是因为有那么一瞬间，你可以在页面加载时看到div，然后在页面完全加载时隐藏。
It looks unprofessional.
看起来很不专业。
Just wondering if there is a way around this?
只是想知道是否有办法解决这个问题？
Thanks
谢谢
回答by Selvakumar Arumugam
Use css style to hide the div.
使用 css 样式隐藏 div。
#selector { display: none; }
or Use it like below,
或者像下面那样使用它，
CSS:
CSS：
.hidden { display: none; }
HTML
HTML
<div id="blah" class="hidden"><!-- div content --></div>
and in jQuery
在 jQuery 中
$(function () {
$('#blah').removeClass('hidden');
});
回答by Halcyon
Barring the CSS solution. The fastest possible way is to hide it immediatly with a script.
除了 CSS 解决方案。最快的方法是立即用脚本隐藏它。
<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.
在这种情况下，我会推荐 Vega 的 CSS 解决方案。但是如果你需要更复杂的东西（比如动画），你可以使用这种方法。
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.
这有一些并发症（见下面的评论）。如果您希望这段脚本真正尽可能快地运行，则不能使用 jQuery，请仅使用本机 JS 并推迟加载所有其他脚本。
回答by David G
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.
使用 CSS 隐藏并不是最好的解决方案，因为有时你希望没有 JS 的用户也能看到 div。 最干净的解决方案是使用 JQuery 隐藏 div。但是 div 在 0.5 秒左右可见，如果 div 位于页面顶部，这是有问题的。
In these cases, I use an intermediate solution, without JQuery. This one works and is immediate :
在这些情况下，我使用不带 JQuery 的中间解决方案。这个有效并且是直接的：
<script>document.write('<style>.js_hidden { display: none; }</style>');</script>
<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>
<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) :
当然，您仍然可以在 div 上添加您想要的所有效果，例如 JQuery toggle()。你会得到最好的行为（恕我直言）：
- for non JS users, the div is visible directly
- for JS users, the div is hidden and has toggle effect.
- 对于非 JS 用户，div 是直接可见的
- 对于 JS 用户，div 是隐藏的并具有切换效果。
回答by Moo
Why not add "display: none;" to the divs style attribute? Thats all JQuery's .hide() function does.
为什么不添加“显示：无；” 到 divs 样式属性？这就是 JQuery 的 .hide() 函数所做的所有事情。
回答by John
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>
回答by GillesC
Using CSS you can just set display:none for the element in a CSS file or in a style attribute
使用 CSS，您可以只为 CSS 文件或样式属性中的元素设置 display:none
#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
或者在 div 之后使用 js 可能也足够快，但没有那么干净
