小虎博客

A-A+

js 显示隐藏div简单效果

2016年10月19日 编程技术 暂无评论

在做网站总后台项目的时候，需要做一个简单的 js隐藏DIV的效果，也就是说有一项内容，点击文字之后才会出现，然后将原来点击的文字隐藏掉，当然，跟原来项目经理说的有一点出入，遂从网上找了一个差不多的效果，自己修改了一下，就这样应用到站点中去了，很简单，也很容易的一个简单的 JS 效果，当然，网上也有许多的 jquery 可以实现同样的效果，看个人习惯了，在这里就把原来的所有代码分享一下了，实例代码如下:

  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.  <!-- xiaohuboke.com -->  
  73. </div>    
  74.     
  75. </body>    
  76.     
  77. </html>  
标签：

给我留言

Copyright © 小虎博客 保留所有权利.   Theme  Ality

用户登录