点击显示和隐藏层

查看效果一查看效果二

XML/HTML代码
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>点击显示/隐藏层</title>  
  5. <style type="text/css">  
  6. a{text-decoration:none;}   
  7. .tab{border:1px solid #e57243;border-top:0;margin:10px 0;text-align:left;width:200px;font-size:14px;}   
  8. .th{border-top:1px solid #e57243;padding:5px;font-weight:700;clear:both;background:#f5e1d9;}   
  9. .td{background:none;padding-left:37px;}   
  10. </style>  
  11. <script type="text/javascript">  
  12. function chg(id_num){   
  13.          var oa = document.getElementById(id_num);   
  14.          var ob = document.getElementById("test_a");   
  15.          if(oa.style.display == "block"){   
  16.                  oa.style.display = "none";   
  17.                  ob.innerHTML = "[+]";   
  18.          }else{   
  19.                  oa.style.display = "block";   
  20.                  ob.innerHTML = "[-]";   
  21.          }   
  22.          return false;   
  23. }   
  24. </script>  
  25. </head>  
  26. <body>  
  27. <div class="tab"><div class="th td" id="test" style="display:block;">那是春天的一弯明月,一如夏天般光彩</div><div class="th" id="9"><a href="#" onclick="return chg('test');" id="test_a">[-]</a> <--点击</div></div>  
  28. </body>  
  29. </html>  

 


[本日志由 admin 于 2009-02-26 11:12 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
回复回复感谢[2009-08-19 04:39 PM | del]
找了半天,终于在你这里找到我想要的了。谢谢!
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:

虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.