html中鼠标点击展开关闭层效果
2015-08-25 19:54
585 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #box,#box2,#box3,#box4{padding:10px;border:1px solid green;} </style> <script type="text/javascript"> //=点击展开关闭效果= function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){ var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj; var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj; var openTip = oOpenTip || ""; var shutTip = oShutTip || ""; if(targetObj.style.display!="none"){ if(shutAble) return; targetObj.style.display="none"; if(openTip && shutTip){ sourceObj.innerHTML = shutTip; } } else { targetObj.style.display="block"; if(openTip && shutTip){ sourceObj.innerHTML = openTip; } } } </script> <title>鼠标点击展开关闭层效果</title> </head> <body> <p><button onclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></p> <p id="box4" style="display:none"> 这里面放的是box的内容. </p> </body> </html>
相关文章推荐
- Html.DropDownList
- Html.DropDownList
- HTML访问CGI
- HTML分辨率自适应
- html 单选框及多选框控制显示及追加元素
- HTML子窗口
- HTML源码中 form 标签的 enctype 属性
- pdf转换成html网页的操作方法
- Silverlight按钮事件中打开HTML页…
- 关于html控件button的onclick和onserverclick事件不能同时起作用问题
- HTML学习03
- aps.net webform框架下页面服务器端控件和html控件用法
- html checkbox的使用
- HideFocus使用
- HTML - Textarea - 空格的问题解决方式
- Validform的基本使用-表单校验
- html学习1-初步了解
- HTML-embed标签详解
- html块级元素与行内元素
- HTML空格占位符