Question

好的，我正在尝试使用Javascript在页面加载上制作一些<div>的消息，我也包含了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').hide();
  $('#about_content').hide();
$('#contact_content').hide();
$('#home_content').hide();
});

Answer 3

你可以这样做

$(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的所有class或div。

检查一下：http://jsfiddle.net/Kritika/khLv4/

Answer 4

$(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();
  }
});

如何在页面加载时隐藏DIVS

4 个答案: