利用JS做到隐藏div和显示div！！ zz

http://hi.baidu.com/notepad19/blog/item/e0d71c8a3d5407dafd1f10e7.html

利用JS做到 隐藏div和显示div！！

2009-08-13 08:37

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示 通过设置display属性可以使div隐藏后释放占用的页面空间，如下 style="display: none;" document.getElementById("typediv1").style.display="none";//隐藏 document.getElementById("typediv1").style.display="";//显示   此JS代码中，没有用try——Catch捕获错误，代码如下： <script language="javascript"> //创建一个showhidediv的方法，直接跟ID属性 function showhidediv(id){ var sbtitle=document.getElementById(id); if(sbtitle){    if(sbtitle.style.display=='block'){    sbtitle.style.display='none';    }else{    sbtitle.style.display='block';    } } } </script> <div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID--> <div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv--> onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！ 再次升级，做两个层之间的切换： <script language="javascript"> //创建一个showhidediv的方法，直接跟ID属性 function showhidediv(id){ var age=document.getElementById("msg_2"); var name=document.getElementById("msg_1"); if (id == 'name') {    if (name.style.display=='none') {     age.style.display='none';     name.style.display='block';    } } else {    if (age.style.display=='none') {     name.style.display='none';     age.style.display='block';    } }   } </script> <div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div> <div id="msg_1" style="display:none;float:left;">林雨林</div> <div id="msg_2" style="display:none;float:left;">18</div>