logo标签列表

JavaScript - 如何在页面加载时隐藏一个Div元素

javascriptjquerycsshtmlhide
40

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

我问这个问题的原因是因为在页面加载时，您可以看到短暂的一秒钟，然后在页面完全加载后隐藏。

这看起来不太专业。

只是想知道是否有一种解决方法？

谢谢

1
我建议你不要这样做。w3schools的错误和正确一样频繁。 - Halcyon
4
@pylover w3schools的引用和内容已经过时，并且他们没有保持标准的最新性。我最近吃了亏，建议你可以看看https://developer.mozilla.org/en-US/或http://www.w3.org/。 - Selvakumar Arumugam
1
w3schools对于Oliver来说已经足够了。 - pylover
1
W3Fools - Derek 朕會功夫
4
@pylover写道“Oliver只需要w3schools就够了”……你的意思是说，由于Oliver刚开始学编程，所以他可以满足于已经过时且有一半是错误的来源？ - Lodder
显示剩余3条评论
6个回答
86
使用CSS样式隐藏div。
#selector { display: none; }

或者按照以下方式使用：

CSS:

.hidden { display: none; }

HTML

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

并且在jQuery中

 $(function () {
     $('#blah').removeClass('hidden');
 });
谢谢，虽然这里所有的答案都很有帮助。但这个答案非常棒。感谢大家。 - Oliver Jones
1
我想强调的是，如果JavaScript被禁用，div将保持隐藏状态。您可以使用类似.no-js(见Modernizr)的类来显示它，如果这是情况的话。这对于淡入、滑入等动画在页面完全加载后开始非常有用。 - LBridge
1
您也可以使用JavaScript方法toggleClass('hidden')轻松切换其可见性。 - renatov
10

我曾经遇到过同样的问题。

使用CSS隐藏不是最好的解决方案，因为有时候你希望没有启用JS的用户也能看到该div。最清晰的解决方案是使用JQuery来隐藏div。但是如果该div位于页面顶部，那么它将会在0.5秒内可见，这可能会导致问题。

在这种情况下，我使用了一种中间方案，而不使用JQuery。这个方法有效且立即生效：

<script>document.write('<style>.js_hidden { display: none; }</style>');</script>

<div class="js_hidden">对于JavaScript用户，此div将被隐藏，对于非JavaScript用户，此div将显示。</div>

当然，您仍然可以在div上添加所需的效果，例如使用JQuery toggle()。这将使其表现得最佳（在我看来）：

  • 对于非JS用户，div直接可见
  • 对于JS用户，div被隐藏并具有toggle效果。
在我看来，那是最好的答案。尽管如此，我更愿意使用Modernizr提供的.no-js类，以便采用更简洁的方法。 - LBridge
有没有不使用document.write的方法来实现这个？ - Pacerier
公平地说，CSS 解决方案并不总是容易适用。例如，当 div 是由第三方模块生成时。因此，尽可能快地通过 JS 隐藏元素（甚至无需等待文档准备就绪）是一种解决方法。 - Andrei
9
除了CSS解决方案之外，最快的方法是使用脚本立即隐藏它。
<div id="hideme"></div>
<script type="text/javascript">
    $("#hideme").hide();
</script>

在这种情况下，我建议使用 Vega 的 CSS 解决方案。但如果您需要更复杂的内容（如动画），则可以使用此方法。
这有一些复杂性（请参见下面的注释）。如果您想让此脚本尽可能快地运行，您不能使用 jQuery，只能使用本机 JS 并推迟加载所有其他脚本。
内联 script 标签只会让你的 HTML 文件更加混乱。 - Derek 朕會功夫
2
他需要绝对的速度，这个目标可以支持一些混乱的 HTML。要实用主义，在确保知道何时打破规范的前提下。 - Halcyon
假设jQuery已经被包含在头部，它就不会出问题，一旦可用就会运行。JavaScript按顺序执行，这意味着该脚本将仅在加载和执行其前面的所有脚本后才被执行。 - Halcyon
需要时间来加载吗？当到达该行时，jQuery可能尚未完全加载。（在使用缓慢的互联网时） - Derek 朕會功夫
是的，你说得对。但考虑到限制条件，这仍然是最快的方法。当jQuery源脚本被缓存时，当然几乎没有延迟。 - Halcyon
显示剩余2条评论
2
为什么不在div的style属性中添加"display: none;"？这就是jQuery的.hide()函数所做的全部。
如果您查看原始帖子，您会发现在加载jQuery之前需要隐藏div。这就是导致FOUC的原因。您必须使用CSS解决方案来确保在加载jQuery时隐藏div。仅使用.hide()在jQuery加载后才起作用。 - JimP
2
@JimpP 我认为Moo是在建议你应该直接将其添加到元素中，像这样<div style="display: none;">隐藏内容</div>从一开始就将元素从HTML中隐藏。jQuery在其hide和show函数中使用此CSS属性。我认为这是一个很好的答案，但应该更详细些。 - thinktt
1
我经常使用这种方法，不确定它是否是一种很好的方式，但对我的需求来说它工作得很好。
<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>
为什么它能工作？你做了哪些更改？以这种方式回答问题的答案有助于读者更好地理解自己的问题。 - AP.
0

使用CSS，您可以在CSS文件或样式属性中仅设置display:none来隐藏元素。

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



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

或者将js代码放在div标签后面可能也足够快，但不够简洁。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接