JavaScript - 在启动时隐藏一个 Div（加载）答案

【问题标题】：JavaScript - Hide a Div at startup (load)JavaScript - 在启动时隐藏一个 Div（加载）
【发布时间】：2012-04-26 06:42:54
【问题描述】：

我的 php 页面中有一个 div，它在页面加载后使用 jQuery 隐藏它。但是有没有办法从加载一开始就隐藏它？

我问的原因是因为有那么一瞬间，页面加载的时候可以看到div，页面加载满的时候就隐藏了。

看起来不专业。

只是想知道是否有办法解决这个问题？

谢谢

【问题讨论】：

我建议你不要。 w3schools 是错误的，也是正确的。
@pylover w3schools 参考资料和内容已经过时，他们的标准没有保持最新。我最近学得很辛苦，建议你看看developer.mozilla.org/en-US 或w3.org
w3schools 对 Oliver 来说已经足够了
W3Fools
@pylover 写道“w3schools 对 Oliver 来说已经足够了”...您基本上是在说 Oliver 对编码很陌生，他可以满足那些过时且一半不正确的资源？

标签： javascript jquery css html hide

【解决方案1】：

使用 css 样式隐藏 div。

#selector { display: none; }

或者像下面这样使用它，

CSS：

.hidden { display: none; }

HTML

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

在 jQuery 中

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

【讨论】：

谢谢，尽管这里的所有答案都很有帮助。这个效果很棒。谢谢大家
我想补充一点，如果禁用 javascript，div 将保持隐藏状态。如果是这种情况，您可以使用 .no-js 之类的类（请参阅 Modernizr）来显示它。特别适用于页面完全加载时开始的淡入、滑入等动画。
也可以使用js方法toggleClass('hidden')轻松切换其可见性。

【解决方案2】：

我也遇到了同样的问题。

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

当然，您仍然可以在 div 上添加您想要的所有效果，例如 JQuery toggle()。你会得到最好的行为（恕我直言）：

对于非 JS 用户，div 是直接可见的
对于 JS 用户，div 被隐藏并具有切换效果。

【讨论】：

在我看来这是最好的答案。虽然，我宁愿使用 Modernizr 提供的 .no-js 类来减少混乱。
没有document.write有什么办法吗？
公平地说，css 解决方案并不总是很容易适用。例如，当 div 由第三方模块生成时。因此，尽可能快地通过 JS 隐藏元素（即使不等待文档准备好）

【解决方案3】：

除非使用 CSS 解决方案。最快的方法是立即使用脚本将其隐藏。

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

在这种情况下，我会推荐 Vega 的 CSS 解决方案。但是如果你需要更复杂的东西（比如动画），你可以使用这种方法。

这有一些复杂性（参见下面的 cmets）。如果你想让这段脚本尽可能快地运行，你不能使用 jQuery，只使用原生 JS 并延迟加载所有其他脚本。

【讨论】：

内联script标签只会给你的HTML文件造成更多混乱。
他需要绝对的速度，这个目标证明了有点凌乱的 HTML 是合理的。务实，知道何时打破标准。
但我不认为 jQuery 已经加载...$("hideme").hide(); 可能会给你一个ReferenceError...
它不会，（假设 jQuery 包含在标头中）它会在它可用时立即运行。 JavaScript 是按顺序执行的，这意味着该脚本只有在加载并执行它之前的所有脚本之后才会执行。
加载不需要时间吗？当它到达这条线时，jQuery 可能没有完全加载。（使用慢速网络时）

【解决方案4】：

为什么不添加“显示：无；”到 div 样式属性？这就是 JQuery 的 .hide() 函数所做的一切。

【讨论】：

如果您查看 OP，您会看到在加载 jQuery 之前需要隐藏 div。这就是导致FOUC的原因。您必须使用 CSS 解决方案来确保在加载 jQuery 时隐藏 div。使用 .hide() 仅在加载 jQuery 后才有效。
@JimpP 我认为 Moo 会留下来，你应该像这样直接将它添加到元素中
隐藏内容
从 html 中隐藏元素一开始。 jQuery 在它的隐藏和显示功能中使用了这个 css 属性。我认为这是一个很好的答案，但应该更详细。

【解决方案5】：

这个方法我用过很多次，不知道是不是一个很好的方法，但是可以满足我的需要。

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

【讨论】：

为什么有效？你做了哪些改变？以这种方式解决问题的答案有助于读者更好地理解自己的问题

【解决方案6】：

使用 CSS，您可以为 CSS 文件或样式属性中的元素设置 display:none

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



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

或者在 div 之后添加 js 也可能足够快，但不够干净

【讨论】：