<div id="demo">AAA</div>

JS隱藏和顯示div的方式有兩種：

方式1：隱藏後釋放佔用的頁面空間 通過設定display屬性可以使div隱藏後釋放佔用的頁面空間. style="display: none;" document.getElementById("demo").style.display="none";//隱藏 document.getElementById("demo").style.display="";//顯示

方式2：隱藏後仍佔有頁面空間，顯示空白 div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白. style="visibility: none;" document.getElementById("demo").style.visibility="hidden";//隱藏 document.getElementById("demo").style.visibility="visible";//顯示

注意： 使用第二方式更人性化，但是，用div.style.display="none"隱藏會引起，div裡面的東西休眠，裡面的事件就不響應了。

jQuery隱藏和顯示div的方式

1、$("#demo").attr("style","display:none;");//隱藏div

      $("#demo").attr("style","display:block;");//顯示div

2、$("#demo").css("display","none");//隱藏div

      $("#demo").css("display","block");//顯示div

3、$("#demo").hide();//隱藏div

      $("#demo").show();//顯示div

4、$("#demo").toggle(//動態顯示和隱藏

         function () { 

              $(this).attr("style","display:none;");//隱藏div

         },

         function () {    $(this).attr("style","display:block;");//顯示div

         }

      );

       <div id="demo"></div>

注：

$("#demo").show()表示display:block,  $("#demo").hide()表示display:none; 

1和2中的display:none可以換成visibility:hidden，display:block可以換成visibility:visible.兩者的區別是前者隱藏後不佔空間，而後者隱藏後會佔空間