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

 

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 
Js代码  收藏代码
  1. style="visibility: none;"  
  2.   
  3. document.getElementById("typediv1").style.visibility="hidden";//隐藏  
  4.   
  5. document.getElementById("typediv1").style.visibility="visible";//显示  
通过设置display属性可以使div隐藏后释放占用的页面空间如下 
Js代码  收藏代码
  1. style="display: none;"  
  2.   
  3. document.getElementById("typediv1").style.display="none";//隐藏  
  4.   
  5. document.getElementById("typediv1").style.display="";//显示  
此JS代码中，没有用try——Catch捕获错误，代码如下： 
Js代码  收藏代码
  1. <script language="javascript">  
  2. //创建一个showhidediv的方法，直接跟ID属性  
  3. function showhidediv(id){  
  4. var sbtitle=document.getElementById(id);  
  5. if(sbtitle){  
  6.    if(sbtitle.style.display=='block'){  
  7.    sbtitle.style.display='none';  
  8.    }else{  
  9.    sbtitle.style.display='block';  
  10.    }  
  11. }  
  12. }  
  13. </script>  
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID-->  <div id="msg" >出现显示的内容</div> <!--这里是MsgDiv--> 
onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！ 
做两个层之间的切换： 
Js代码  收藏代码
  1. <script language="javascript">  
  2. //创建一个showhidediv的方法，直接跟ID属性  
  3. function showhidediv(id){  
  4. var age=document.getElementById("msg_2");  
  5. var name=document.getElementById("msg_1");  
  6. if (id == 'name') {  
  7.    if (name.style.display=='none') {  
  8.     age.style.display='none';  
  9.     name.style.display='block';  
  10.    }  
  11. } else {  
  12.    if (age.style.display=='none') {  
  13.     name.style.display='none';  
  14.     age.style.display='block';  
  15.    }  
  16. }     
  17. }  
  18. </script>  
  19. <div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>  
  20. <div id="msg_1" style="display:none;float:left;">林雨林</div>  
  21. <div id="msg_2" style="display:none;float:left;">18</div>  
//示例二 
显示一个层的同时隐藏另一个层 
Html代码  收藏代码
  1. <html>  
  2.   
  3. <head>  
  4.   
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  6.   
  7. <title>无标题文档</title>  
  8.   
  9. <script language="JavaScript" type="text/JavaScript">  
  10.   
  11. <!--  
  12.   
  13. function showhidediv(id){  
  14.   
  15. var age=document.getElementById("msg_2");  
  16.   
  17. var name=document.getElementById("msg_1");  
  18.   
  19. if (id == 'name') {  
  20.   
  21.    if (name.style.display=='none') {  
  22.   
  23.     age.style.display='none';  
  24.   
  25.     name.style.display='block';  
  26.   
  27.    }  
  28.   
  29. } else {  
  30.   
  31.    if (age.style.display=='none') {  
  32.   
  33.     name.style.display='none';  
  34.   
  35.     age.style.display='block';  
  36.   
  37.    }  
  38.   
  39. }     
  40.   
  41. }  
  42.   
  43. -->  
  44.   
  45. </script>  
  46.   
  47. </script>  
  48.   
  49. </head>  
  50.   
  51. <body>  
  52.   
  53. <div id="msg_1" style="display:block;float:left;" onclick='showhidediv("age")';>  
  54.   
  55. <p id="photoTitle" >单击此处添加描述</p></div>  
  56.   
  57. <div id="msg_2" style="display:none;float:left;" >  
  58.   
  59. <form id="">  
  60.   
  61. <textarea class="textarea" id="" name=""></textarea>  
  62.   
  63. <div class="">  
  64.   
  65. <input type="button" value="保存" class="" id="">  
  66.   
  67. <input type="button" value="取消" class="" id="" onclick='showhidediv("name")';>  
  68.   
  69. </div>  
  70.   
  71. <input type="hidden" name="" value=""></form>  
  72.   
  73. </div>  
  74.   
  75. </body>  
  76.   
  77. </html>  
posted @ 2015-07-19 16:58  wu_yun_jiang  阅读(5916)  评论(0)  编辑  收藏  举报