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

Question

场景:我有一个包含多个DIV的页面.一些DIV应该在第一页加载时隐藏.我已经使用Jquery hide()函数来隐藏DIV.

问题:出于某种原因,jquery hide函数似乎只是部分工作,即需要完全隐藏的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;"但是,由于我在注释中概述的原因,这通常不是要采取的路径.