夏日博客

A-A+

js 显示隐藏div简单效果

2016年10月19日 前端设计 评论 15 条 阅读 17 views 次

在做网站总后台项目的时候，需要做一个简单的 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.  <!-- xiariboke.net -->  
  73. </div>    
  74.     
  75. </body>    
  76.     
  77. </html>  
标签：

15 条留言  访客：15 条  博主：0 条

  1. 微部落博客 2016年11月02日 下午 6:58  -199楼  回复

    网站有几天没有更新了啊

  2. 两对半 2016年11月02日 上午 12:21  -198楼  回复

    用ＪＳ能否实现打开本地文件夹对话框，来选取目录？

  3. 明月登楼的博客 2016年10月29日 下午 8:37  -197楼  回复

    不错，这个代码有点意思，就是不知道应该应用在那些场景下！

  4. 微部落博客 2016年10月29日 下午 6:56  -196楼  回复

    文章一如既往地高深

  5. 高平台球阀 2016年10月28日 上午 11:01  -195楼  回复

    分析的很透彻啊。

  6. 28兼职网 2016年10月28日 上午 11:01  -194楼  回复

    感谢分享哦。

  7. 一元云购源码 2016年10月26日 下午 2:24  -193楼  回复

    封装好的可能不知道原理，不过会比较的简单易用比如jq

  8. PHP学习博客 2016年10月26日 下午 2:23  -192楼  回复

    感觉用jquery显隐更方便

  9. 破折君 2016年10月22日 上午 10:34  -191楼  回复

    对代码一窍不通

  10. 西狂 2016年10月21日 下午 12:33  -190楼  回复

    不错，又涨姿势了 😛

  11. 一个逗逼式笑话 2016年10月20日 下午 3:56  -189楼  回复

    好厉害

  12. 我爱动感单车网 2016年10月20日 下午 1:06  -188楼  回复

    这些个知识，我是真的看不懂，大家可别笑我小白哦。咱原本也就是业余爱好在写博客的嘛，与自己的专业可谓风马不相及，呵呵！

  13. 易淘金股票博客 2016年10月19日 下午 8:52  -187楼  回复

    写的不错很有技术含量 😀

  14. 香港虚拟主机 2016年10月19日 下午 3:54  -186楼  回复

    js 显示隐藏div简单效果，好像经常都能用到，用 jquery实现是不是更简单一些呢

    • smiling 2016年10月21日 上午 10:52  地下1层  回复

      都差不多的，本来隐藏显示的代码就不多。

给我留言