JS 仿IE7 126邮箱 傲游 标签 选项卡(更新下载地址)

最新推荐文章于 2024-08-10 16:15:00 发布
最新推荐文章于 2024-08-10 16:15:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML 文章标签： ie javascript url class border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljfblog/article/details/7321059
版权

 

JsTab.html:

<html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
< title>JS 仿IE7 126邮箱 傲游 标签 选项卡</title>
< script src="jstablib.js" type="text/javascript"></script>
< link rel="stylesheet" href="jstab.css" />
< style>
.mnu{padding-top:30px}
.mnu a{margin:1px 1px 1px 3px; border:1px solid #0066FF; display:block; color:#000066; font-size:14px; padding:5px; text-decoration:none; background:#DCECFA }

</style>
< /head>

<body>
< table width="100%" border="0" cellspacing="0" height="100%" cellpadding="0">
< tr>
     <td width="10%" valign="top" class="mnu">
< a href="javascript:fOpenTab('links/1.html','页面1');">页面1</a>
< a href="javascript:fOpenTab('links/2.html','页面2');">页面2</a>
< a href="javascript:fOpenTab('links/3.html','页面3');">页面3</a>
< a href="javascript:fOpenTab('links/4.html','页面4');">页面4</a>

< /td>
     <td width="90%" align="left" valign="top">

< table width="100%" border="0" cellspacing="0" height="100%" cellpadding="0">
       <tr><td valign="top" style="height:28px;"><div class="gTab" id="dvTab"></div></td></tr>
       <tr><td><div class="tabcon" id="tabcon"></div></td></tr>
     </table>  
  
< /td>
< /tr>
< /table>
< script type="text/javascript">fInitTabCtrl();</script>
< /body>
< /html>

jstablib.js

function getE(id){return document.getElementById(id);}
var sHomeIframeUrl="links/home.html";
var ids={};
ids.tabnav="dvTab";
ids.tabcon="tabcon";
var iTab=1;

var otab = {};
otab.tab="<table border='0' cellspacing='0' cellpadding='0' class='tabsel' title='{title}' \
style='width:124px' tabid='outLink_{id}' id='outLink_{id}'> \
< tr><td class=tLe> </td><td class=bdy \
οnclick=\"fShowTab('{id}')\"><nobr>{title}</nobr></td> \
< td class=btn><a class='TabCls' hideFocus title='关闭' \
href=\"javascript:fClose('{id}')\"> </a></td> \
< td class=tRi> </td></tr></table>";
otab.frm='<iframe id="tabfrm_{id}" scrolling="auto" src="{url}" \
style="height:100%;width:100%;" frameborder="0"></iframe>';

function fOpenTab(url,title){

//对存在的显示
var op=getE(ids.tabcon);
for(var i = 0;i<op.childNodes.length;i++){
    if(op.childNodes[i].src==url){
     var showid = op.childNodes[i].id;
     fShowTab(showid.replace("tabfrm_",""));
     return;
    }
} 

//对不存在的添加
var s=otab.tab.replace(/{title}/g,title);
s=s.replace(/{id}/g,iTab);

var frm=otab.frm.replace(/{id}/g,iTab);
frm=frm.replace(/{url}/g,url);

getE(ids.tabnav).innerHTML=getE(ids.tabnav).innerHTML+s;
getE(ids.tabcon).innerHTML=getE(ids.tabcon).innerHTML+frm;
fShowTab(iTab);

iTab++;
}
function fShowTab(tableid){
var op=getE("tabfrm_"+tableid).parentNode;
var opt=getE("outLink_"+tableid).parentNode; 
for(var i = 0;i<op.childNodes.length;i++){
    if(op.childNodes[i].id=="tabfrm_"+tableid){
     op.childNodes[i].style.display="block";
     opt.childNodes[i].className="tabsel";  
    }else{
     op.childNodes[i].style.display="none";
     opt.childNodes[i].className="tab"; 
    }
}
}
function fClose(tableid){

//如果是全部关闭
if(tableid=="_1"){
    //移除全部 不用fInitTabCtrl()，防重装载
    o=getE(ids.tabnav);
    of=getE(ids.tabcon);
    var chlen=o.childNodes.length;
    for(var i=2;i<chlen;i++){
     o.removeChild(o.childNodes[2]);
     of.removeChild(of.childNodes[2]);
    }
    o.childNodes[0].style.display="none";//关闭所有按钮
    o.childNodes[1].className="tabsel";//主页
    of.childNodes[1].style.display="block";
    iTab=1;
    return; 
}
//移除
var o=getE("outLink_"+tableid);
o.parentNode.removeChild(o);

var of=getE("tabfrm_"+tableid);
var disp=of.style.display;
of.parentNode.removeChild(of);

//如果关闭的是隐藏的标签，直接返回
if(disp=="none") return;

//否则显示最后一个
o=getE(ids.tabnav); 
if(o.childNodes && o.childNodes[o.childNodes.length-1]){
    var lastid= o.childNodes[o.childNodes.length-1].id;
    fShowTab(lastid.replace("outLink_",""));
}
}

function fInitTabCtrl(){

var homeTab=otab.tab.replace(/{title}/g,"首页");
homeTab=homeTab.replace("<td class=btn><a class='TabCls' hideFocus title='关闭' \
href=\"javascript:fClose('{id}')\"> </a></td>","");
homeTab=homeTab.replace(/nobr/g,"div");
homeTab=homeTab.replace("width:124px","width:50px");
homeTab=homeTab.replace(/{id}/g,0);

var homeIframe=otab.frm.replace(/{id}/g,0);
homeIframe=homeIframe.replace(/{url}/g,sHomeIframeUrl);

getE(ids.tabcon).innerHTML=homeIframe;
getE(ids.tabnav).innerHTML=homeTab;
}

jstablib_ch.js
function fOpenTab(url,title){
window.parent.fOpenTab(url,title);
}
jstab.css

body{margin:2px 2px 0px 2px; overflow:hidden;}
.tabcon iframe{}
.gTab table td nobr{width:100px; overflow:hidden;text-overflow:ellipsis;}
.gTab{ border-bottom:2px solid #6e96c5; text-align:left; margin:0px; height:28px;}
.gTab .tab,.gTab .tabsel{ height:28px;cursor:default; display:inline; margin:0px;}

.gTab .tab .tLe,.gTab .tabsel .tLe{width:4px; font-size:0px; }
.gTab .tab .tRi,.gTab .tabsel .tRi{width:4px; font-size:0px;}

.gTab .tab .tLe{background:url(images/tab/left0.gif) right bottom no-repeat; }
.gTab .tab .bdy{background:url(images/tab/center0.gif) left bottom repeat-x;color:gray;font-size:12px;padding:10px 0px 0px 3px;}
.gTab .tab .tRi{background:url(images/tab/right0.gif) left bottom no-repeat;}

.gTab .tab .btn{width:10px;background:url(images/tab/center0.gif) left bottom repeat-x;}
.gTab .tab .btn a{text-decoration:none; cursor:default; display:block; width:8px; height:10px; background:url(images/tab/close0.gif) left bottom no-repeat;}
.gTab .tab .btn a:hover{background:url(images/tab/close1.gif) left bottom no-repeat;}

.gTab .tabsel .tLe{background:url(images/tab/left2.gif) right bottom no-repeat;}
.gTab .tabsel .bdy{background:url(images/tab/center2.gif) left bottom repeat-x ;color:black;font-size:12px;font-weight:bold;padding:8px 0px 0px 3px;}
.gTab .tabsel .tRi{background:url(images/tab/right2.gif) left bottom no-repeat; }
.gTab .tabsel .btn{width:10px;background:url(images/tab/center2.gif) left bottom repeat-x;}
.gTab .tabsel .btn a{text-decoration:none; cursor:default; display:block; width:8px; height:10px; background:url(images/tab/close0.gif) left bottom no-repeat; margin-bottom:3px;}
.gTab .tabsel .btn a:hover{background:url(images/tab/close1.gif) left bottom no-repeat;}

home.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
< title>无标题文档</title>
< script src="../jstablib_ch.js" type="text/javascript"></script>
< /head>

<body style="padding-bottom:600px;">
这是管理首页<br />
< a href="javascript:fOpenTab('links/1.html','页面1');">页面1</a>
< a href="javascript:fOpenTab('links/2.html','页面2');">页面2</a>
< a href="javascript:fOpenTab('links/3.html','页面3');">页面3</a>
< a href="javascript:fOpenTab('links/4.html','页面4');">页面4</a>
< /body>
< /html>

ljfblog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html选项卡出现乱码,html乱码
weixin_36169520的博客
06-07 9163
一、乱码造成原因 - TOP1、比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。3、浏览器不能自动检测网页编码，造成网页乱码。二、解决乱码方法 - TOP第一种，html网页源代码编码...
基于jQuery实现的仿百度首页滑动选项卡效果代码
12-29
这款选项卡适用浏览器有：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-f-baidu-hd-nav-style-codes/ 完整实例代码...
android 自由浏览器下载地址,2012安卓手机明星App推荐: 傲游云浏览器
weixin_33218490的博客
05-26 150
近日，傲游发布的全新傲游云浏览器(预览版)得到安卓手机用户的广泛好评。美国移动评论网站appolicious.com也将傲游云浏览器Android版进行推荐，称之为“最值得拥有的App应用”。作为行业首个基于云服务的全平台浏览器软件，傲游云浏览器Android版集成了傲游在全平台覆盖及多功能云服务两方面的优势，支持Windows、Mac、iOS，无论是文本、图片、视频等基于互联网的网页内容，傲游云...
jquery动态增减选项卡
Love丶兰的博客
10-12 6353
jquery动态增减选项卡
ie兼容的HTML编辑器,让eWebEditor编辑器支持IE6.IE7.IE8傲游浏览器的方法
weixin_28898707的博客
06-23 310
最近项目用了eWebEditoreWebEditor在线HTML文本编辑器，发现点击eWebEditor上的所有按钮都没反应，eWebEditor一直都没改过，很少纳闷，经过排除最终确定问题出在IE浏览器的版本。解决eWebEditor不支持IE8.IE7.傲游浏览器的方法如下：1、首先找到eWebEditor编辑器所在的目录，然后搜索到editor.js文件，由于eWebEditor有很多个版本...
html仿百度页面代码素材,基于jQuery实现的仿百度首页滑动选项卡效果代码
weixin_27379781的博客
06-03 137
本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码。分享给大家供大家参考，具体如下：今天给大家分享一款基于jQuery的仿百度首页滑动选项卡，可实现tab选项卡内容上下翻滚切换的功能。这款选项卡适用浏览器有：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：在线演示地址如下：完整实例代码代码点击此处本站下载。html代码：导航新...
css ie7不显示,CSS一个属性 导致网页在IE7和IE6中显示不同
weixin_31572321的博客
08-03 106
河南农药信息网在设计过程中是以IE6为主要使用对象的，因为目前为止，使用IE6的仍然为大多数(XP操作系统用的是IE6)，看以下数据：上个月(2010年2月)，一个国内网站统计的浏览器使用数据,大致是这样的：(微软 IE6.063.8087%微软 IE7.010.8093%360安全浏览器5.6431%微软 IE8.04.9583%傲游 Maxthon4.2878%腾讯 TT3.7174%世界之...
前端JS特效第35波：jQuery纵向tab选项卡内容切换代码
wangtianming88的专栏
07-14 177
jQuery纵向tab选项卡内容切换代码
傲游linux32bit,傲游浏览器32位下载
weixin_34012355的博客
05-14 519
傲游浏览器32位下载是一款非常不错的浏览器，为广大使用者提供了极速的反应速度，不管是启动速度还是搜索速度都非常快，同时允许用户为浏览器自行添加插件，让浏览器的功能变得更加强大。傲游浏览器32位下载特色1.用户可以轻松地将网页中的图片，文本和链接发送到您的其他设备；2.可以将文件上传到云端服务器中，以确保用户使用其他设备进行登录后也可以立即获取该文件；3.用户在使用时所收藏的书签、浏览记录，下...
让eWebEditor编辑器支持IE6.IE7.IE8傲游的办法
北极光的博客
09-10 1043
以下方法基本汇集全各种处理办法了，部分办法在有些机器上不可用，请选择有效的办法使用即可。方法一能够兼容ie6、7、8. 方法一： 今天把ie升级到8.0竟然出现点击ewebeditor在线编辑器按钮无法弹出编辑框的问题，就是所有按钮都失效了。 查看了一下网络资料，测试了一下都不能用，最好自己研究出一个可行的解决办法，并测试成功了。 具体操作如下： 打开editor.js 找到i
jQuery响应快速易于使用的Tabs选项卡特效源码.zip
07-05
jQuery响应快速易于使用的Tabs选项卡特效源码是一款响应快速且易于使用的jQuery Tabs选项卡插件pignose.tab.js的代码。该选项卡插件支持多种样式的选项卡：普通选项卡，带子选项的选项卡，扁平风格的选项卡，响应式...
jQuery实现4种超酷Tabs选项卡特效源码.zip
07-05
这组选项卡同4之后效果，分别为基本选项卡，彩色带图标的选项卡，下划线样式选项卡和垂直选项卡。这些选项卡样式简洁大方，兼容IE8，非常实用。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游...
asp.net 版 ewebeditor 支持ie7、ie8、傲游
03-07
个人还是推崇这个版本的，只是这个版本在使用时还有一点小的问题本人稍微修改了一下，进一步完完善后，该版本可以支持IE7、IE8及傲游浏览器，同时其帮助文件也可以使用。 首先这个版本在使用方面和ewebeditor 2.8的...
web开发人员关心的IE7和IE8共存的问题
09-22
Web开发人员在面对IE7和IE8共存的问题时，常常会遇到兼容性挑战，因为这两个版本的Internet Explorer浏览器在渲染引擎和JavaScript支持上存在差异。IE7是2006年的产品，而IE8在2009年发布，带来了许多改进和新特性，...
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 282
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 337
注释很详细，直接上代码……
【Vue3】图片未加载成功前占位
菜就多练
08-08 307
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 408
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
maxthon 傲游云浏览器 官方下载
11-18
官方下载还使用户获得最新的软件更新和安全补丁，以提升浏览器的性能和安全性。 要进行傲游云浏览器的官方下载，用户只需访问Maxthon官方网站，并从下载页面选择适合自己操作系统的版本。然后，点击下载按钮，等待...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ljfblog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值