39

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

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

看起来很不专业。

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

谢谢

4

6 回答 6

84

使用 css 样式隐藏 div。

#selector { display: none; }

或像下面这样使用它，

CSS：

.hidden { display: none; }

HTML

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

在 jQuery 中

 $(function () {
     $('#blah').removeClass('hidden');
 });
于 2012-04-13T21:40:37.827 回答
9

我有同样的问题。

使用 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 是隐藏的并且具有切换效果。
于 2013-10-01T09:57:51.693 回答
8

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

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

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

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

于 2012-04-13T21:42:41.683 回答
2

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

于 2012-04-13T21:41:18.107 回答
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>
于 2017-03-22T15:22:22.780 回答
0

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

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



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

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

于 2012-04-13T21:41:32.143 回答