发表新帖
发表新帖

How do I hide an HTML element before the page loads using jQuery

前端 未结
关注
7 1277
独厮守ぢ
独厮守ぢ 2020-12-07 20:44

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

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

I initially want the div to be not visi

相关标签:
7条回答
  • 情话喂你
    2020-12-07 21:33

    With CSS3 you can actually hide content until a page loads by taking advantage of the :only-child selector.

    Here is a demonstration of how to do this. The basic idea is that CSS while loading will add a single node to the DOM while loading that node and its child nodes. Further, once a second child is added to the given parent node the :only-child selector rule is broken. We match against this selector and set display: none to hide the given node.

    <!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>
    0 讨论(0)
 看不清?
提交回复
热议问题