A-A+

js 显示隐藏div简单效果

2016年10月19日 web前端设计 评论 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.com -->  
  73. </div>    
  74.     
  75. </body>    
  76.     
  77. </html>  
标签:

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

  1. 微部落博客

    网站有几天没有更新了啊

  2. 两对半

    用JS能否实现打开本地文件夹对话框,来选取目录?

  3. 明月登楼的博客

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

  4. 微部落博客

    文章一如既往地高深

  5. 高平台球阀

    分析的很透彻啊。

  6. 28兼职网

    感谢分享哦。

  7. 一元云购源码

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

  8. PHP学习博客

    感觉用jquery显隐更方便

  9. 破折君

    对代码一窍不通

  10. 西狂

    不错,又涨姿势了 😛

  11. 一个逗逼式笑话

    好厉害

  12. 我爱动感单车网

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

  13. 易淘金股票博客

    写的不错很有技术含量 😀

  14. 香港虚拟主机

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

    • smiling

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

给我留言