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

最新推荐文章于 2021-08-22 10:12:42 发布
最新推荐文章于 2021-08-22 10:12:42 发布
阅读量226 收藏
点赞数
文章标签： javascript ViewUI

首先看主页面代码：

<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 οnlοad="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


iteye_15819
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
仿京东显示与隐藏
weixin_47558015的博客
04-28 158
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
防京东详情页面
huoxuebin0316的博客
05-02 803
代码 package com.example.jingdongdeom.Activity; import android.content.Context; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; imp
京东店铺全屏代码+悬浮代码
08-02
京东店铺首页全屏代码 左右侧悬浮代码 css 网店装修
留言
web
09-02 126
留言代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
仿京东显示隐藏密码
...
08-22 289
仿京东显示隐藏密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t
兼容IE与Firefox的js 复制代码
01-21
如果是div等，直接网页标记就需要用到innerText,但firefox火狐浏览器并不支持innerText,所以又要考虑如何让firefox支持innerText,这样以来就可以完美的实现了，具体的代码可以参考软件开发网的功能代码。下一篇文章...
禁用Tab键JS代码兼容Firefox和IE
12-11
标题中的“禁用Tab键JS代码兼容Firefox和IE”指的是在网页中使用JavaScript来禁用用户使用Tab键进行页面元素的焦点切换功能，并且这段代码能够同时适应Firefox和Internet Explorer这两种不同的浏览器。在Web开发中，...
IE/FireFox具备兼容性的拖动代码
10-30
这段代码是关于实现一个在IE和Firefox浏览器中都具有兼容性的拖动功能的JavaScript代码。在Web开发中，由于不同的浏览器对某些API或特性的支持不同，因此编写跨浏览器的代码是必要的。这段代码就是为了解决这个问题...
js实现兼容IE、Firefox的图片缩放代码
10-23
主要介绍了js实现兼容IE、Firefox的图片缩放代码,涉及JavaScript操作图片元素的相关技巧,需要的朋友可以参考下
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
01-19
html里的marqueen也能实现内容的滚动，但滚动是间断的，在滚动一个周期中，会有一段空白出现。如果滚动的区域比较大，空间的出现，会让页面看起来很不美观。运用JavaScript可以使这一问题得到改观，实现无间断的滚动...
解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容
12-10
令人蛋疼的IE，IE6/IE7下父元素有相对/绝对定位时，子元素在IE6和IE7下overflow:hidden;失效。 情况一：（在parent上增加position:relative） 复制代码代码如下: <style type=”text/css”> .parent{ width:100px; height:100px;border:1px solid #f00; overflow:hidden; position:relative;} .sonF{ position:relative;} .son{ width:100px; height:100px; position:absolu
div左侧显示和隐藏
05-03
div实现iframe的框架左侧隐藏与显示实例；代码非常简单；分享给大家
javascript 控制frameset左边显示与隐藏
Hsn_lin的专栏
05-22 6898
页面布局为左边菜单页，中间有个12象素宽度的条形页（用于点击后显示隐藏左边的菜单页），右边则是主体页面了。 第2个文件：frameline.html 这个文件中设置了用JAVASCRIPT脚本显示隐藏左边菜单页FRAME框架的代码。 function ShowHideLeft(objtd){ if (parent.pageframe.cols=="115,12,*"){
京东首页刷新 状态栏隐藏
Gybk123的博客
02-26 452
注意：rg是状态栏 shouye_xrc.setLoadingMoreEnabled(false); shouye_xrc.setLoadingListener(new XRecyclerView.LoadingListener() { @Override public void onRefresh() { fg.setVisibility(View.GONE);...
【商城开发一】Android高仿京东标题栏渐变，下拉隐藏（RecyclerView）
木子的专栏
02-24 3581
开始工作了，第一个项目是一个商城app，分享一下京东商城滑动标题栏渐变，下拉刷新隐藏标题栏的效果。先看看再说 1.先看一下布局文件，是一个刷新控件嵌套一个RecyclerView，head_searche是搜索栏，也就是toolbar了。 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android京东标题栏,【商城开发一】Android高仿京东标题栏渐变，下拉隐藏（RecyclerView）...
weixin_28909295的博客
05-27 247
开始工作了，第一个项目是一个商城app，分享一下京东商城滑动标题栏渐变，下拉刷新隐藏标题栏的效果。先看看再说 1.先看一下布局文件，是一个刷新控件嵌套一个RecyclerView，head_searche是搜索栏，也就是toolbar了。2.然后是渐变效果。实例化RecyclerView，重写滑动监听，mDistance是int类型，表示滑动距离。通过判断滑动距离，来改变所搜栏的Alpha值。自己...
打开左侧导航栏,子窗体取得(访问)父窗体中另一子窗体的ID
ZH592677127的专栏
07-26 1919
只能在IE下运行： function Submit_onclick(){     if(parent.myFrame.cols == "199,7,*") {         parent.myFrame.cols="0,7,*";         document.getElementById("ImgArrow").src="images/switch_right.gif";
"专业 CSS兼容IE和Firefox技巧集合
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值