有时候需要将一个网页划成两个部分，其中一个部分可以收缩．
通常情况下，采用了iframe框架来实现，但是不利于控制滚动条（不能同时滚动两个块）．
为了更融洽分块，特写了以下脚本，并且代码量很少．
原理也很简单，就是用table来划分两个块，每个td(单元格)标记一个ID号，然后设置该单元格的Style属性来控制该单元格的宽度等属性．然后通过按钮的相关动作来设置这些值的变化．
具体代码如下：
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #558FFB;
}
.navPoint
{
font-family: Webdings;
font-size:9pt;
color:white;
cursor:hand;
}
-->
</style>
<link href="image/style.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function btnclick()
{
if(document.getElementById("td1").style.display != 'none')
{
document.getElementById("td1").style.display = 'none';
document.getElementById("td2").style.width = '1020';
document.getElementById("switchPoint").innerText=4;
}
else
{
document.getElementById("td1").style.display = '';
document.getElementById("td2").style.width = '810';
document.getElementById("switchPoint").innerText=3;
document.getElementById("div1").style.visibility = '';
}
}
</script>
<link href="image/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form2">
<table width="1020" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
上边的部分
</td>
</tr>
<tr>
<td id="td1" style="height: 38px; 210px;" valign="top">
<div id="div1">左边的部分</div>
</td>
<td style=" 10px; height: 38px; background-color: #6b59c9;" onclick="btnclick()">
<span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span>
</td>
<td id="td2" style="height: 38px; 800px;" bgcolor="#4988FC" valign="top" align="center">
右边的部分
</td>
</tr>
</table>
</form>
</body>
</html>