JS 仿IE7 126邮箱 傲游 标签 选项卡(更新下载地址)
来源：互联网 发布：java 对象equals方法 编辑：程序博客网 时间：2024/06/09 23:01
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.jsfunction 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 \onclick=\"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.jsfunction fOpenTab(url,title){window.parent.fOpenTab(url,title);}jstab.cssbody{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>
