• 利用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>  
  • 相关阅读:
    条件转移指令小结
    《那些年啊，那些事——一个程序员的奋斗史》——50
    《那些年啊，那些事——一个程序员的奋斗史》——50
    《那些年啊，那些事——一个程序员的奋斗史》——51
    《那些年啊，那些事——一个程序员的奋斗史》——51
    《那些年啊，那些事——一个程序员的奋斗史》——52
    《那些年啊，那些事——一个程序员的奋斗史》——49
    《那些年啊，那些事——一个程序员的奋斗史》——51
    《那些年啊，那些事——一个程序员的奋斗史》——52
    《那些年啊，那些事——一个程序员的奋斗史》——50
  • 原文地址：https://www.cnblogs.com/wu-yun-jiang/p/4658863.html
Copyright © 2020-2023  润新知