Question

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

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

看起来不专业。

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

由于

Answer 1

使用css样式隐藏div。

#selector { display: none; }

或使用如下，

CSS：

.hidden { display: none; }

HTML

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

和jQuery

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

Answer 2

禁止CSS解决方案。最快的方法是立即用脚本隐藏它。

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

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

这有一些复杂情况（见下面的评论）。如果你希望这段脚本尽可能快地运行，你就不能使用jQuery，只使用原生JS并推迟加载所有其他脚本。

Answer 3

我遇到了同样的问题。

使用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（）。并且你将获得最好的行为（imho）：

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

Answer 4

为什么不添加“display：none;”到divs样式属性？这就是所有JQuery的.hide（）函数都可以。

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

Answer 6

使用CSS，您只需为CSS文件或样式属性

中的元素设置display：none

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



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

或者在div之后的js也可能足够快，但不是那么干净

JavaScript - 启动时隐藏Div（加载）

6 个答案: