HTML5--》点击显示隐藏内容
2016-05-08 23:35
543 查看
<details>浏览器支持比较差,可以用JavaScript实现这种功能。
效果图
点击一下出现/消失
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js点击显示隐藏内容</title> <style type="text/css" > body{font-size:12px;} span{font-weight:bold;} details{ overflow:hidden; height:0; padding-left:200px; position:relative; display:block; } details[open]{height:auto;} </style> </head> <body> <span onClick="spanClick();">点击显示内容</span> <details id="details1"> www.calamus.cn </details> <script> function spanClick(){ var obj=document.getElementById("details1"); var att=obj.getAttribute("open"); if(att!="open"){ obj.setAttribute("open","open"); } else{ obj.removeAttribute("open"); } } </script> </body> </html>
效果图
点击一下出现/消失
相关文章推荐
- HTML5--》details
- HTML5列表
- HTML5之本地存储
- HTML5样式 链接 表格
- html5图形组合
- html5绘制变换图形-旋转图形
- PJAX初体验(主要是利用HTML5 新增API pushState和replaceState+AJAX)
- html5绘制渐变图形-图形缩放
- html5绘制变形图形-变换坐标原点
- HTML5之地理信息
- html5绘制图形渐变-径向渐变
- html5绘制渐变图形-线性渐变
- HTML5概述
- html5绘制基本图形-直线
- HTML5回调函数与地理定位
- html5绘制基本图形-圆形
- 使用Flexible实现手淘H5页面的终端适配
- Canvas学习
- html5画布-绘制矩形
- HTML5的思考