A-A+

js显示/隐藏div代码收藏

2016年02月21日 web前端设计 评论 1 条 阅读 6 views 次

最简单的办法就是利用js来判断div的display来控制其是显示还是隐藏哦,下面我们来看一最简单的实例。

  1. <script type="text/javascript">  
  2. function divcontrol(divid){  
  3.   if(document.getElementById(divid).style.display=="none"){  
  4.     document.getElementById(divid).style.display="";  
  5.   }  
  6.   else{  
  7.     document.getElementById(divid).style.display="none";  
  8.   }  
  9. }  
  10. </script>  

下面是调用代码:

  1. <a onclick="divcontrol('divid')" style="cursor:pointer">链接名称</a>  

再看一个不错的实例,写法比较高级,代码如下:

  1. <script  type="text/javascript">  
  2. <!--  
  3. function toggle(targetid){  
  4.     if (document.getelementbyid){  
  5.         target=document.getelementbyid(targetid);  
  6.             if (target.style.display=="block"){  
  7.                 target.style.display="none";  
  8.             } else {  
  9.                 target.style.display="block";  
  10.             }  
  11.     }  
  12. }  
  13. -->  
  14. </script>  
  15. <style type="text/css">  
  16. <!--  
  17. #div1{  
  18. background-color:#000000;  
  19. height:400px;  
  20. width:400px;  
  21. display:none;  
  22. }  
  23. -->  
  24. </style>  
  25. </head>  
  26. <body>  
  27. <input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />  
  28. <center>  
  29. <div id="div1"></div></center>  
  30. 居中的div  
  31. </body>  
  32. </html>  
标签:

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

  1. 大谋士

    收藏了,谢谢! 😉

给我留言