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

最新推荐文章于 2025-08-08 14:21:23 发布

原创最新推荐文章于 2025-08-08 14:21:23 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#框架 #javascript #border #xhtml #url

Readln/Writeln 同时被 2 个专栏收录

28 篇文章

订阅专栏

HTML/CSS

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页框架隐藏与显示的方法，通过简单的代码即可兼容IE和Firefox浏览器。该方法利用frameset布局，并结合特定的HTML和JavaScript代码实现框架栏的收放功能。

淘宝、以前的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(https://blog.csdn.net/images/siderbg.gif) no-repeat -55px 200px; } .tdbgover { background: #fefeb4 url(https://blog.csdn.net/images/siderbg.gif) no-repeat -84px 200px; } .tdbg2 { background: #f2f2f2 url(https://blog.csdn.net/images/siderbg.gif) no-repeat 1px 200px; } .tdbgover2 { background: #fefeb4 url(https://blog.csdn.net/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>