您的位置：首页 > 编程语言

一段左侧菜单的显示隐藏的代码(兼容IE,FireFox)

2012-05-02 15:01 387 查看

首先看主页面代码：

<frameset rows="75,*" cols="*" frameborder="no" border="0" framespacing="0" >

<frame src="header.html" name="topFrame" frameborder="no" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" height="75"/>

<frameset name="myFrame" id="myFrame" cols="183,8,*" frameborder="no" border="0" framespacing="0">

<frame src="subMenu.html" name="leftFrame" id="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="sidebar" width="183"/>

<frame src="switch.html" name="midFrame" id="midFrame" frameborder="no" scrolling="No" noresize="noresize" id="midFrame" title="midFrame" />

<frame src="main.html" name="mainFrame" id="mainFrame" title="main"/>

</frameset>

</frameset>

<noframes>

switch.html代码：

</head>

<script type="text/javascript" language="JavaScript">

function Submit_onclick(){

var win = window.parent.document.getElementById("myFrame");

if(win.cols == "183,8,*") {

win.cols="0,8,*";

document.getElementById("ImgArrow").src="resourse/switch_right.gif";

document.getElementById("ImgArrow").alt="打开左侧导航栏";

} else {

win.cols="183,8,*";

document.getElementById("ImgArrow").src="resourse/switch_left.gif";

document.getElementById("ImgArrow").alt="隐藏左侧导航栏";

}

}

function MyLoad() {

if(window.parent.location.href.indexOf("MainUrl")>0) {

window.top.midFrame.document.getElementById("ImgArrow").src="resourse/switch_right.gif";

}

}

</script>

<body onload="MyLoad()">

<div id="switchpic"><a href="javascript:Submit_onclick()"><img src="resourse/switch_left.gif" alt="隐藏左侧导航栏" id="ImgArrow" /></a></div>

</body>

</html>

核心代码：var win = window.parent.document.getElementById("myFrame");

win.cols="0,8,*";

页面使用frameSet构建框架。最初我使用parent.myFrame.cols来设置左侧菜单的显示隐藏。、

在IE8下测试通过，但是FF下却提示parent.Frame没有定义。后来才发现FF下不能直接通过Frame ID来访问

IE FF下都可以通过name来访问但是 FrameSet并不支持name属性。

因此上面的window.parent.myFrameFset =》window.parent.document.getElementById("myFrame");

转自：http://hi.baidu.com/vict0323/blog/item/7112e6ef22985ce0b3fb95f3.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航