jquery - 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="display:none;"但是，由于我在评论中概述的原因，这通常不是采用的路线。