javascript - 如何让 DIVS 在页面加载时隐藏

Question

好的，我正在尝试<div>使用 Javascript 在页面加载时使一些'消失，我也包含 jQuery。但这是我的代码。

$(document).ready(function() {
  hide();
  function hide(){
    floorcontent = document.getElementById('floor_content').hidden = true;
    aboutcontent = document.getElementById('about_content').hidden = true;
    contactcontent = document.getElementById('contact_content').hidden = true;
    homecontent = document.getElementById('home_content').hidden = false;
  }
});

现在它什么也没做，但看起来不错，有什么想法吗？

Answer 1

如果您可以为要隐藏的所有元素提供一个通用类，那就太好了。例如：

<div id="floor_content" class="tohide"></div>
<div id="about_content" class="tohide"></div>
//...

然后，当您加载页面时，您可以执行以下操作：

$(document).ready(function() {
    $('.tohide').hide();
});

这样，动态添加/删除您想要隐藏的元素会更容易。

Answer 2

你可以这样做

$(document).ready(function() { 
  $('#floor_content, #about_content, #contact_content, #home_content').hide();  
});

或者

$(document).ready(function() { 
    hide_div();
    function hide_div(){
          $('#floor_content, #about_content, #contact_content, #home_content').hide();  
    }
 });

使用逗号添加所有要隐藏的id或。classdiv

检查这个：http: //jsfiddle.net/Kritika/khLv4/

Answer 3

$(document).ready(function() {
  hide();
  function hide(){
    document.getElementById('floor_content').style.display = 'none';
    document.getElementById('about_content').style.display = 'none';
    document.getElementById('contact_content').style.display = 'none';
    document.getElementById('home_content').style.display = 'none';
  }
});

这是使用纯 Javascript 来隐藏。使用 JQuery 你可以做到；

$(document).ready(function() {
  hide();
  function hide(){
    $('#floor_content, #about_content, #contact_content, #home_content').hide();
  }
});

Answer 4

尝试这个

$(document).ready(function() { 
  $('#floor_content').hide();
  $('#about_content').hide();
$('#contact_content').hide();
$('#home_content').hide();
});