js实现可折叠区域
上一篇 / 下一篇 2012-04-08 15:08:35 / 个人分类：js技术
<!--
实现系统中常用的折叠区域
可折叠区域的基本思想是，可以通过点击某个地方来显示或者隐藏屏幕中的某个区域。
当某个区域折叠起来，其他区域就会移动位置到空余的地方。
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script. type="text/javascript">
function toggle(sDivId)
{
var Div = document.getElementById(sDivId);
//当display设置为none时，元素就被从页面流中移除，页面重绘时就像这个元素不存在一样
oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
//将visiblility设置为hidden时，它仅仅隐藏元素，以留下一个元素所占区域的空白
//oDiv.style.visibility = (oDiv.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="a" style="background-color: blue; color: while;font-weight: bold; padding: 2px; cursor: pointer"
nclick="toggle('divContent1')">Click Here</div>
<div style="border: 3px solid gray; height: 100px; padding: 10px"
id="divcontent1">This is some content to show and hide.</div>
<div id="b" style="background-color: red; color: black; font-weight: bold;padding:10px; cursor: pointer"
nclick="toggle('divContent2')">Click Here</div>
<div style="border: 3px solid green; height:100px;padding:10px"
id="divContent2">This is some content to show and hide.</div>
</body>
</html>
实现系统中常用的折叠区域
可折叠区域的基本思想是，可以通过点击某个地方来显示或者隐藏屏幕中的某个区域。
当某个区域折叠起来，其他区域就会移动位置到空余的地方。
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script. type="text/javascript">
function toggle(sDivId)
{
var Div = document.getElementById(sDivId);
//当display设置为none时，元素就被从页面流中移除，页面重绘时就像这个元素不存在一样
oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
//将visiblility设置为hidden时，它仅仅隐藏元素，以留下一个元素所占区域的空白
//oDiv.style.visibility = (oDiv.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
</head>
<body>
<div id="a" style="background-color: blue; color: while;font-weight: bold; padding: 2px; cursor: pointer"
nclick="toggle('divContent1')">Click Here</div>
<div style="border: 3px solid gray; height: 100px; padding: 10px"
id="divcontent1">This is some content to show and hide.</div>
<div id="b" style="background-color: red; color: black; font-weight: bold;padding:10px; cursor: pointer"
nclick="toggle('divContent2')">Click Here</div>
<div style="border: 3px solid green; height:100px;padding:10px"
id="divContent2">This is some content to show and hide.</div>
</body>
</html>
TAG:
标题搜索
日历
|
|||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
| 1 | 2 | 3 | 4 | 5 | 6 | ||||
| 7 | 8 | 9 | 10 | 11 | 12 | 13 | |||
| 14 | 15 | 16 | 17 | 18 | 19 | 20 | |||
| 21 | 22 | 23 | 24 | 25 | 26 | 27 | |||
| 28 | 29 | 30 | |||||||
我的存档
数据统计
- 访问量: 71728
- 日志数: 62
- 文件数: 1
- 书签数: 4
- 建立时间: 2011-01-27
- 更新时间: 2012-06-16
