Question

我有一些显示或隐藏div的JQuery代码。

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

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

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

但是，在浏览器上，内容在消失之前加载一秒钟，这不是我想要的。

如何在页面加载之前设置隐藏元素，同时保持显示的能力使用脚本动态隐藏它？

Answer 1

div.hidden
{
   display: none
}

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

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

Answer 2

制作一个css类

.hidden {
display: none;
}

将此添加到加载页面时不希望看到的任何元素。然后使用$("div#extraControls").show();再次显示它。

Answer 3

在CSS中：

#extraControls { display: none; }

或在HTML中：

<div id="extraControls" style="display: none;"></div>

Answer 4

#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;    
}


 <a href="#" onclick="return false;">Expand Me</a>
 ///this way u can make a link to act like a button too

 <div id="toggleMe">  //this will be hidden during the page load
  //your elements
 </div>

///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
 $(document).ready(function () {
        $("a").click(function () {
            $('#toggleMe').toggle("slow"); //Animation effect
        });
    });
</script>

///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...

Answer 5

使用CSS3，您可以通过利用:only-child选择器实际隐藏内容，直到页面加载为止。

Here is a demonstration of how to do this。基本思想是加载CSS时会在加载该节点及其子节点时向DOM添加单个节点。此外，一旦将第二个子节点添加到给定父节点，:only-child选择器规则就会被破坏。我们匹配此选择器并设置display: none以隐藏给定节点。

<!doctype html>

<html>

  <head>
    <title>Hide content until loaded with CSS</title>
    <style type="text/css" media="screen">
      .hide-single-child > :only-child {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class='hide-single-child'>
      <div>
        <h1>Content Hidden</h1>
        <script>
          alert('Note that content is hidden until you click "Ok".');
        </script>
      </div>
      <div></div>
    </div>
  </body>

</html>

Answer 6

您可以做的是在文档的末尾插入内联script标记，或者在ID为“extraControls”的div之后插入。应该早点开火。

<div id="extraControls">i want to be invisible!</div>
<script type="text/javascript">$("div#extraControls").hide()</script>

当然你也可以做这个服务器端，但也许有一个很好的理由你不想这样做（比如，如果浏览器不支持javascript，可以看到控件）。

Answer 7

加载页面加载javascript函数的最佳方法是

$(window).bind("load", function() {
   // code here
});

在你的情况下

div.hidden
{
   display: none
}

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

$(window).bind("load", function() {
   $("div#extraControls").removeClass("hidden");
});

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

7 个答案: