左框架（顶框架）隐藏、显示功能备忘

来源：互联网发布：知彼而知己编辑：程序博客网时间：2024/05/22 10:52

淘宝、以前的csdn上都有类似的功能：点击框架边上的按钮可以隐藏或显示框架，如图：

用一小段javascript即可搞定，兼IE和FF

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>VB = Visual Basic 在线课堂</title></head><frameset rows="100,11,*" cols="*" frameborder="no" border="0" framespacing="0" id="topmain"><frame src="top.htm" mce_src="top.htm" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /><frame src="siderbar-h.htm" mce_src="siderbar-h.htm" name="siderbar-h" scrolling="No" noresize="noresize" id="siderbar-h" title="siderbar-h" /> <frameset rows="*" cols="210,11,*" framespacing="0" frameborder="no" border="0" id="leftmain"><frame src="left.htm" mce_src="left.htm" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" /><frame src="siderbar-v.htm" mce_src="siderbar-v.htm" name="siderbar-v" scrolling="No" noresize="noresize" id="siderbar-v" title="siderbar-v" /><frame src="main09.php" mce_src="main09.php" name="mainFrame" id="mainFrame" title="mainFrame" /> </frameset></frameset><noframes><body>noframe error!</body></noframes></html>

left.htm 和top.htm即正常的左、顶部页面

靠近left.htm的右边有siderbar-v.htm，靠近top.htm下面有siderbar-h.htm，这两者是实现点击隐藏和显示的关键，主要代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>siderbar-left</title><meta http-equiv="Content-Type" content="text/html"; charset="utf-8"><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body {margin:0px;padding:0px;}.tdbg {background: #f2f2f2 url(images/siderbg.gif) no-repeat -55px 200px;}.tdbgover {background: #fefeb4 url(images/siderbg.gif) no-repeat -84px 200px;}.tdbg2 {background: #f2f2f2 url(images/siderbg.gif) no-repeat 1px 200px;}.tdbgover2 {background: #fefeb4 url(images/siderbg.gif) no-repeat -27px 200px;}</style><mce:script language="javascript"></mce:script></head><body onload="load();"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td id="leftbar" width="11" style="display:none" mce_style="display:none" class="tdbg" onmouseover="javascript:this.className='tdbgover'" onmouseout="javascript:this.className='tdbg'" title='展开左侧菜单'><a href="javascript:;" mce_href="javascript:;" onclick="switchSysBar()"><img src="images/space.gif" mce_src="images/space.gif" width="11" height="1000" alt='展开左侧菜单' border="0"></a></td><td id="rightbar" width="11" class="tdbg2" onmouseover="javascript:this.className='tdbgover2'" onmouseout="javascript:this.className='tdbg2'" title='隐藏左侧菜单'><a href="javascript:;" mce_href="javascript:;" onclick="switchSysBar()"><img src="images/space.gif" mce_src="images/space.gif" width="11" height="1000" alt='隐藏左侧菜单' border="0"></a></td></tr></table></body> </html>