JavaScript结合CSS样式实现可折叠区域的例子
2010-06-18 10:04
387 查看
这里介绍一个比较简单的办法,就是使用css的display属性。当display设置为none时,元素就会从页面流里被移除。
演示代码如下:
演示代码如下:
<html> <head> <title>Style Example</title> <script type="text/javascript"> function toggle(sDivId) { var oDiv = document.getElementById(sDivId); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; } </script> </head> <body> <div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent1')">Click Here</div> <div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent1">This is some content to show and hide.</div> <p> </p> <div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent2')">Click Here</div> <div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent2">This is some content to show and hide.</div> </body> </html>
相关文章推荐
- JavaScript可折叠区域实现代码
- JavaScript可折叠区域实现代码
- javascript 实现table 行折叠的例子
- JavaScript实现异步调用例子
- javascript实现打印html制定区域同时消除header/footer区域
- [原创]asp.net结合html,javascript实现无刷新跨域数据提交
- 客户端结合javascript调用JSON的例子
- JavaScript结合ArcGIS地图服务实现的搜索建议框
- javascript实现页面指定区域打印
- js实现可折叠区域
- 可折叠区域代码的实现
- Android中WebView载入本地HTML代码并实现Java与JavaScript交互的例子
- Javascript - Math 对象 - 某个数字区域之间的随机数(精确度:小数点后两位)toFixed方法原生JS实现
- JavaScript结合HTML DOM实现联动菜单
- 纯javaScript脚本来实现Ajax功能例子一
- C# windows程序应用与JavaScript 程序交互实现例子
- javascript实现改变图片指定区域的颜色
- JavaScript基础 button按钮结合submit方法 实现表单的提交与验证
- Javascript实现禁止输入中文或英文的例子