如何在页面加载之前隐藏HTML元素

问题描述

$ b

  $（div＃extraControls）。show（）显示或隐藏div的一些JQuery代码。 ）; // OR .hide（）
  

我最初希望div不可见，所以我用：

  $（document）.ready（function（）{
 $（div＃extraControls）。hide（） ; 
}）; 
  

但是，在浏览器中，内容会在消失前加载一秒钟，这不是我

如何在页面加载之前设置隐藏元素，同时保持显示隐藏的能力？

解决方案

  div.hidden 
 {
 display：none 
} 
 
< div id =extraControlsclass =hidden> 
< / div> 
 
 $（document）.ready（function（）{
 $（div＃extraControls）。removeClass（hidden）; 
}）; 
  

I have some JQuery code that shows or hides a div.

$("div#extraControls").show();   // OR .hide()

I initially want the div to be not visible so I used:

$(document).ready(function() {
    $("div#extraControls").hide();
});

However, on the browser, the content loads visible for a second before disappearing, which is not what I want.

How do I set the hide the element before the page loads whilst keeping the ability to show hide it dynamically with a script?

解决方案

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});

这篇关于如何在页面加载之前隐藏HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！