网页里实现页面折叠的两种方法
方法一：
需要两张小图，一个表示上，一个表示下，本例中为toggle_gray_up.gif和toggle_gray_down.gif。源自www.donews.com。查看运行效果。html和javascript代码如下：
<html>
<head>
<script language="JavaScript">
function ToggleVisible(targetID, imageID, linkImage, linkImageCollapsed)
{
if (document.getElementById){
target = document.getElementById(targetID);
if (target.style.display == "none") {
target.style.display = "";
} else {
target.style.display = "none";
}
if (linkImageCollapsed != "") {
image = document.getElementById(imageID);
if (target.style.display == "none") {
image.src = linkImageCollapsed;
} else {
image.src = linkImage;
}
}
}
}
</script>
</head>
<body>
<table width="300" border=1 id="test" cellpadding="0" cellspacing="0" >
<tr>
<td height=20 align=right>
<a onClick="ToggleVisible('Contents','LinkImage','toggle_gray_up.gif','toggle_gray_down.gif'); return false;" href="#">
<div width=100% height=20><img id="LinkImage" src="toggle_gray_down.gif" src="toggle_gray_down.gif" alt="" border="0" /></div>
</a>
</td>
</tr>
<tr id="Contents">
<td>
test 123 123 12 test<br>
test 123 123 12 test<br>
test 123 123 12 test<br>
</td>
</tr>
</table>
</body>
</html>
方法二：
什么都不需要。直接点表头就可以实现折叠。源自徐静蕾的blog。查看运行效果。html和javascript代码如下：
<html>
<head>
<script language="JavaScript">
function $(s){return document.getElementById(s);}
function swap(s,a,b,c){$(s)[a]=$(s)[a]==b?c:b;}
function hide(s){$(s).style.display=$(s).style.display=="none"?"":"none";}
</script>
</head>
<body>
<table width="100%" border=1 id="test" cellpadding="0" cellspacing="0" >
<tr onClick="javascript:hide('content');swap('title','className','up','down');">
<td id="title" class="up">分类</td>
</tr>
<tr id="content" ><td>
test 123 123 12 test<br>
test 123 123 12 test<br>
test 123 123 12 test<br>
</tr></td>
</table>
</body>
</html>
Trackback: http://tb.donews.net/TrackBack.aspx?PostId=768666