Jquery hide() 函数在页面加载时显示

Question

场景: 我有一个包含多个 DIV 的页面。某些 DIV 应在首页加载时隐藏。我使用 Jquery hide() 函数来隐藏 DIV。

问题: 由于某种原因，jquery 隐藏功能似乎只能部分工作，即需要完全隐藏的 DIV 显示一秒钟然后隐藏。

请问有办法解决这个问题吗？

Answer 1

在 DOM 准备好之前，您的 JavaScript 不会执行(您无法隐藏尚不存在的元素)，因此浏览器会渲染它然后隐藏它。根据您的浏览器的速度和代码的效率，您可能会注意到，也可能不会注意到。

更好的解决方案是使用 css 将元素隐藏起来。

#elementId { display:none; }

您可以将此规则与其余 css 一起包含在样式标记中。如果你有很多想要隐藏/显示的元素，给它们一个共同的类名；然后你可以一次性切换它们的可见性。其 CSS 为:

.commonClassName { display:none; }

然后在 jQuery 中，您可以调用 .show() 来显示它们，或调用 .toggle() 来打开/关闭它们的可见性。 jQuery 类选择器与 css 类选择器相同:

$('.commonClassName').show();

注意:您还可以使用 html style 属性进行样式更改: style="display:none;" 但是，由于我在评论中概述的原因，这通常不是要采取的路线。