js控制框架页显示_js 显示框架源码-优快云博客

本文链接：https://blog.youkuaiyun.com/bug_bug/article/details/1134281

本文介绍如何通过调整HTML框架集（frameset）的cols属性实现网页左侧导航栏的展开与收缩功能，使用户能够更好地利用屏幕空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常看到别人做的框架页可以收缩，自己也想做一个。偷偷研究了一下，发现并不神秘。嘿嘿。不敢独享跟我一样的菜鸟可以偷学两招。嘿嘿。基本的效果可以看下图：

仔细观察下面的页面，大多数人会回答是一个左右分的框架。呵呵。不然，其实他是左中右三分的框架页。只不过中间的框架页宽度非常之小而已。查看源码可以知道主框架源码如下：

<frameset rows="*" cols="156,8,*" frameborder="0" border="0" id="frame" >
<frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" />
<frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" />
<frameset rows="80,*" frameborder="no" border="0" >
<frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" />
<frame src="login.html" name="mainFrame" frameborder="0" />
</frameset>
</frameset>
<noframes><body>对不起,您的浏览器版本不支持框架技术.</body></noframes>

它将框架分为左中右三分的。中间的框架页宽度只有8.左边设置了156。右边为剩余大小。关键的部分还是在中间的页面。注意frameset的id叫frame.下面会用到。所有的动态改变框架的代码全部隐藏在中间的页面中。代码如下：