在一个框架下,要实现对于左侧栏目的收放功能,不知道为什么实现不了,请大牛帮我看看出错在哪里??<!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>
<link rel="stylesheet" href="../CSS/switch.css" type="text/css"/>
<script language="javascript" type="text/javascript"> var flag = false;
function shift_status()
{
var mainFrame = top.document.getElementsByName("main")[0];
if(flag)
{
if(screen.width>1024) {
mainFrame.cols = "170,12,*";
} else if(screen.width>800) {
mainFrame.cols = "170,12,*";
} else {
mainFrame.cols = "160,9,*";
}
document.getElementById("menuSwitch1").src='../Images/switch1_3.gif';
document.getElementById("menuSwitch1").title='隐藏';
}
else
{
//parent.main.cols = "0,9,*";
mainFrame.cols = "0,12,*";
document.getElementById("menuSwitch1").src='../Images/switch1_4.gif';
document.getElementById("menuSwitch1").title='显示';
} flag = !flag;
}
</script>
</head>
<body onclick="shift_status()" leftmargin="0" topmargin="0" style="margin-right:4px; border-right:solid 1px #a5c6e9" marginheight="0" marginwidth="0">
<span class="cacher" id="cacheData" name="cacheData"></span>
<center>
<table class="switch3" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="switch1" width="2">
<img height="1" src="../Images/index/ccc.gif" width="1" alt=""/>
</td>
<td class="switch2" id="menuSwitch" style="cursor: pointer" valign="center" bgcolor="#e9e9e9">
<img id="menuSwitch1" height="11" src="../Images/index/switch1_3.gif" width="7" alt=""/>
</td>
<td width="2" bgcolor="#e9e9e9">
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>隐藏栏</title>
<link rel="stylesheet" href="../CSS/switch.css" type="text/css"/>
<script language="javascript" type="text/javascript"> var flag = false;
function shift_status()
{
var mainFrame = top.document.getElementsByName("main")[0];
if(flag)
{
if(screen.width>1024) {
mainFrame.cols = "170,12,*";
} else if(screen.width>800) {
mainFrame.cols = "170,12,*";
} else {
mainFrame.cols = "160,9,*";
}
document.getElementById("menuSwitch1").src='../Images/switch1_3.gif';
document.getElementById("menuSwitch1").title='隐藏';
}
else
{
//parent.main.cols = "0,9,*";
mainFrame.cols = "0,12,*";
document.getElementById("menuSwitch1").src='../Images/switch1_4.gif';
document.getElementById("menuSwitch1").title='显示';
} flag = !flag;
}
</script>
</head>
<body onclick="shift_status()" leftmargin="0" topmargin="0" style="margin-right:4px; border-right:solid 1px #a5c6e9" marginheight="0" marginwidth="0">
<span class="cacher" id="cacheData" name="cacheData"></span>
<center>
<table class="switch3" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="switch1" width="2">
<img height="1" src="../Images/index/ccc.gif" width="1" alt=""/>
</td>
<td class="switch2" id="menuSwitch" style="cursor: pointer" valign="center" bgcolor="#e9e9e9">
<img id="menuSwitch1" height="11" src="../Images/index/switch1_3.gif" width="7" alt=""/>
</td>
<td width="2" bgcolor="#e9e9e9">
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
====================================
网页上左中右样式frame框架,点中间的小条,左面框架隐藏,右边框架全部显示,是网页上常用的结构,例如猫扑之类的。。 其效果主要是由以下代码控制:wtoogle.htm<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body.wtoogle {
margin: 0px;
background-color: #F6F6F6;
}
.wtoogle a, .wtoogle a:active, .wtoogle a:visited {
background-color:#718BD6;
font-size:10px;
color: #FFFFFF;
text-decoration:none;
}
</style>
<script type="text/javascript">
<!--
var iniCols, noCols, o_mf, o_ms,s;
window.onload = function(){
o_mf = parent.document.getElementById('mainframe');
o_ms = document.getElementById('menuSwitch');
noCols = iniCols = o_mf.cols;
var pos;
if((pos = noCols.indexOf(",")) != -1)
noCols = "0" + noCols.substring(pos);
s = false;
}
function changeLeft(){
s = !s;
o_mf.cols = s ? noCols : iniCols;
o_ms.innerHTML = s ? "►" : "◄";
}
//-->
</script>
</head>
<body class="wtoogle">
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr><td>
<a href="javascript:changeLeft();" class="wtoogle" id="menuSwitch">◄</a>
</td></tr></table>
</body>
</html> --------------------------------------------------------------------------------------------框架整体展示页:home.html<html>
<head>
<title>管理页面首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript">
var isMin = false;
var fo = this;
function setMin(o) {
if (fo == o) {
isMin = true;
}
}
function logout(){
document.location.href='<%=request.getContextPath()%>/manager/login.jsp';
}
function unsetMin(o) {
fo = o;
isMin = false;
}
window.onunload = logout;
window.onblur = new Function("top.setMin(this)");
window.onfocus = new Function("top.unsetMin(this)");
</script>
</head>
<frameset cols="165,11, *" id="mainframe" framespacing="0" border="0" frameborder="0">
<frame name="contents" src="left.html" marginheight="0" marginwidth="0" noresize>
<frame name="toogle" src="wtoogle.htm" scrolling="no" marginwidth="0" marginheight="0" noresize>
<frame name="main" src="right1.html" scrolling="auto" noresize>
</frameset><noframes></noframes>
</html>【转】
隐藏、展示左侧部分框架效果