框架集的折叠

最新推荐文章于 2023-03-13 13:00:17 发布

xiao_jun_0820

最新推荐文章于 2023-03-13 13:00:17 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发文章标签：框架 javascript menu server html border

本文链接：https://blog.youkuaiyun.com/xiao_jun_0820/article/details/1660363

web开发专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用HTML框架集(frameset)进行页面布局的方法，并通过JavaScript实现了动态显示和隐藏左侧或右侧子框架的功能。重点讲解了如何通过修改主框架的cols属性来实现这一效果。

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

主框架mainFrame分成三个子框架,分别为leftFrame,rightFrame,topFrame,框架集代码如下:

</frameset>

在topFrame中添加一个图标用来显示和隐藏leftFrame或是rightFrame,隐藏rightFrame代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="top.aspx.cs" Inherits="top" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

function Show_Hide_Menu(){

if(window.parent.leftFrame.cols=="160,*,0,0,0"){

document.getElementById("menuICON").src="../image/Image00010.jpg";

document.getElementById("menuICON").alt="隐藏菜单"

window.parent.leftFrame.cols="*,0,0,0,0";

}

else{

document.getElementById("menuICON").src="../image/Image00009.jpg";

document.getElementById("menuICON").alt="显示菜单"

window.parent.leftFrame.cols="160,*,0,0,0";

}

</script>

</div>

</form>

</body>

</html>

隐藏leftFrame代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="right.aspx.cs" Inherits="right" %>