框架Frame布局页面:
使用页面ShowHide.htm响应图标的点击按钮来改变framecol的cols的值。
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Frame_Index" %>
<!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 runat="server">
<title>档案管理系统</title>
</head>
<frameset rows="75,*" >
<frame src="top.aspx" frameborder="no" name="logo" scrolling="no" >
<frameset cols="150,12,*" border="1" framespacing="0" name ="framecol" ID ="framecol">
<frame src="guide.aspx" noresize="noresize" name="treeview">
<frame src="ShowHide.htm" scrolling="no" noresize="noresize" name="ShowHide">
<frame src="content.aspx" name="content">
</frame>
</frameset>
</frame>
<noframes>
<body background="../Images/background.jpg">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</noframes>
</frameset>
</html>
中间框架ShowHide.htm的代码:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<!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>
<title>无标题页</title>
<style type="text/css">
body{ margin-top:0px;
margin-left:0px;
margin-right:0px;
}
</style>
<script type="text/javascript">
function coro(){
if(window.parent.framecol.cols=="150,12,*"){
document.all.tool.src="..\\Images\\opentool.jpg";
tool.alt="显示导航栏";
window.parent.framecol.cols="0,12,*";
}
else{
document.all.tool.src="..\\Images\\closetool.jpg";
tool.alt="隐藏导航栏";
window.parent.framecol.cols="150,12,*";}
}
</script>
</head>
<body>
<div style="text-align: left">
<table border="0" cellpadding="0" height="100%" cellspacing="0">
<tr valign="middle">
<td align="center" style="width: 10px">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img id="tool" alt="隐藏导航栏" onclick="coro()"
src="../Images/closetool.jpg" style="cursor: hand" hspace="0" border="0" />
</td>
</tr>
</table>
</div>
</body>
</html>