仿windows选项卡或叫做tabpan以及tabpage，现在还有最新的进展譬如仿淘宝网导航菜单效果皆属于此类：

运行代码框
<script type="text/javascript" > function TabPage(width, height, tabTitleArray, tabPageArray) { var ids = new Array(); var id = document.uniqueID; var tabTitleHtml = ""; var index = 0; for (var i = 0; i < tabTitleArray.length; i++) { tabTitleHtml += "<table border='0' cellspacing='0' cellpadding='0' width='" + width + "'>" + "<tbody><tr>"; var titles = tabTitleArray[i]; for (var n = 0; n < titles.length; n++) { var myId = id + index; ids[index] = myId; var title = titles[n]; tabTitleHtml += "<td class='TabTitle'" + " onclick=\"secBoard(this, '" + myId + "')\">" + title + "</td>"; index++; } tabTitleHtml += "</tr></tbody></table>"; } var tabPageHtml = ""; for (var i = 0; i < tabPageArray.length; i++) { tabPageHtml += "<tbody id='" + ids[i] + "' style='display:none''>" + "<tr><td>" + tabPageArray[i] + "</td>" + "</tr></tbody>"; } var controlID = document.uniqueID.toString(); var html = "<table id='" + controlID + "' width='" + width + "' border='0'><tbody><tr><td>" + tabTitleHtml + "<table border='0' cellspacing='0' cellpadding='0' width='" + width + " ' height='" + height +"' class='TabPage'>" + tabPageHtml + "</table>" + "</td></tr></tbody></table>"; // window.clipboardData.setData('text', html); document.write(html); document.getElementById(controlID).rows[0].cells[0].children[0].rows[0].cells[0].click(); } function secBoard(obj, tabPageID) { // td. tr. tbody table var currentTabTitleTable = obj.parentNode.parentNode.parentNode; var container = obj.parentNode.parentNode.parentNode.parentNode; for (var n = 0; n < container.children.length - 1; n++) // 最后一个Childe是TabPageTable { var cells = container.children[n].rows[0].cells; for(var i = 0; i < cells.length; i++) { var cell = cells[i] if (cell.className == "SelectedTabTitle") { cell.className = "TabTitle"; break; } } } obj.className = "SelectedTabTitle"; var tabPageTable = container.lastChild; for (var i = 0; i < container.children.length; i++) { var node = container.children[i]; if (node != currentTabTitleTable) continue; if (node.nextSibling == tabPageTable) break; node.swapNode(node.nextSibling); node = container.children[i+1]; } for(var i = 0; i < tabPageTable.tBodies.length; i++) { var tbody = tabPageTable.tBodies[i]; if (tbody.style.display != "none") { tbody.style.display = "none"; break; } } document.getElementById(tabPageID).style.display = "block"; } function GetPinYinArray() { var pinYinArray = new Array( new Array('a','ai','an','ang','ao'), new Array('ba','bai','ban','bang','bao','bei','ben','beng','bi','bian','biao','bie','bin','bing','bo','bu'), new Array('ca','cai','can','cang','cao','ce','cen','ceng','cha','chai','chan','chang','chao','che','chen','cheng','chi','chong','chou','chu','chua','chuai','chuan','chuang','chui','chun','chuo','ci','cong','cou','cu','cuan','cui','cun','cuo'), new Array('da','dai','dan','dang','dao','de','deng','di','dia','dian','diao','die','ding','diu','dong','dou','du','duan','dui','dun','duo'), new Array('e','en','er'), new Array('fa','fan','fang','fei','fen','feng','fo','fou','fu'), new Array('ga','gai','gan','gang','gao','ge','gei','gen','geng','gong','gou','gu','gua','guai','guan','guang','gui','gun','guo'), new Array('ha','hai','han','hang','hao','he','hei','hen','heng','hong','hou','hu','hua','huai','huan','huang','hui','hun','huo'), new Array(), new Array('ji','jia','jian','jiang','jiao','jie','jin','jing','jiong','jiu','ju','juan','jue','jun','jv'), new Array('ka','kai','kan','kang','kao','ke','ken','keng','kong','kou','ku','kua','kuai','kuan','kuang','kui','kun','kuo'), new Array('la','lai','lan','lang','lao','le','lei','leng','li','lia','lian','liang','liao','lie','lin','ling','liu','long','lou','lu','luan','lue','lun','luo','lv'), new Array('ma','mai','man','mang','mao','me','mei','men','meng','mi','mian','miao','mie','min','ming','miu','mo','mou','mu'), new Array('na','nai','nan','nang','nao','ne','nei','nen','neng','ni','nian','niang','niao','nie','nin','ning','niu','nong','nou','nu','nuan','nue','nuo','nv'), new Array('o','ou'), new Array('pa','pai','pan','pang','pao','pei','pen','peng','pi','pian','piao','pie','pin','ping','po','pou','pu'), new Array('qi','qia','qian','qiang','qiao','qie','qin','qing','qiong','qiu','qu','quan','que','qun'), new Array('ran','rang','rao','re','ren','reng','ri','rong','rou','ru','ruan','rui','run','ruo'), new Array('sa','sai','san','sang','sao','se','sen','seng','sha','shai','shan','shang','shao','she','shen','sheng','shi','shou','shu','shua','shuai','shuan','shuang','shui','shun','shuo','si','song','sou','su','suan','sui','sun','suo'), new Array('ta','tai','tan','tang','tao','te','teng','ti','tian','tiao','tie','ting','tong','tou','tu','tuan','tui','tun','tuo'), new Array(), new Array(), new Array('wa','wai','wan','wang','wei','wen','weng','wo','wu'), new Array('xi','xia','xian','xiang','xiao','xie','xin','xing','xiong','xiu','xu','xuan','xue','xun'), new Array('ya','yan','yang','yao','ye','yi','yin','ying','yo','yong','you','yu','yuan','yue','yun'), new Array('za','zai','zan','zang','zao','ze','zei','zen','zeng','zha','zhai','zhan','zhang','zhao','zhe','zhen','zheng','zhi','zhong','zhou','zhu','zhua','zhuai','zhuan','zhuang','zhui','zhun','zhuo','zi','zong','zou','zu','zuan','zui','zun','zuo') ); var array = new Array(pinYinArray.length); for (var i = 0; i < pinYinArray.length; i++) { var html = ""; var myArray = pinYinArray[i]; for (var n = 0; n < myArray.length; n++) { html += myArray[n] + " "; } html += ""; array[i] = html; } return array; } function GetFirstLetterArray() { var array = new Array( new Array('A','B','C','D','E','F','G'), new Array('H','I','J','K','L','M','N'), new Array('O','P','Q','R','S','T'), new Array('U','V','W','X','Y','Z')); return array; } // 调用例子一 new TabPage(200, 50,GetFirstLetterArray(), GetPinYinArray() ); // 调用例子二 var titleArray = new Array( new Array(1, 2, 3, 4), new Array(5, 6, 7, 8), new Array(9, 10, 11, 12), new Array(13, 14, 15, 16)); var pageArray = new Array(1, 2,3 ,4, 5,6,7,8,9,10,11,12,13,14,15,16); new TabPage(200, 50,titleArray, pageArray ); </script> <style type="text/css"> .TabTitle { text-align: center; background-color:#99CC99; cursor: hand; color: #000000; border-left: 1px solid #F0F0F0; border-top: 1px solid #F0F0F0; border-right: 1px solid gray; border-bottom: 1px solid #F0F0F0 } .SelectedTabTitle { text-align: center; background-color: #D2D8D8; cursor: hand; color: blue; border-left: 1px solid #F0F0F0; border-top: 1px solid #F0F0F0; border-right: 1px solid gray; } .TabPage { background-color: #D2D8D8; color: #000000; border-left:1px solid #F0F0F0; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tab Effect Example</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link href="http://vip.5d.cn/allinhands/M/file/2-sample.css" rel="stylesheet" type="text/css"> <script language="JavaScript"> function tabit(id,cid) { tab5d.className="taboff";tabcv.className="taboff";tabbi.className="taboff";id.className="tabon"; c5d.style.display="none";ccv.style.display="none";cbi.style.display="none";cid.style.display="block"; //winname=cid; } function showall() { tab5d.className="tabon";tabcv.className="tabon";tabbi.className="tabon"; c5d.style.display="block";ccv.style.display="block";cbi.style.display="block"; } </script> </head> <body onLoad="tabit(tab5d,c5d)"> <table width="300" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="20" class="taboff" id="tab5d" style="cursor:hand" onClick="tabit(tab5d,c5d)" width="25%">5DMedia</td> <td class="taboff" id="tabcv" style="cursor:hand" onClick="tabit(tabcv,ccv)" width="25%">ChinaVisual</td> <td class="taboff" id="tabbi" style="cursor:hand" onClick="tabit(tabbi,cbi)" width="25%">Bluediea</td> <td width="25%">&nbsp;</td> </tr> <tr id="c5d" style="display:none"> <td colspan="4" class="tdbody"> <p><strong><br> <img src="http://vip.5d.cn/allinhands/M/file/5dmedia.gif" width="88" height="31"><br> <br> 5DMedia</strong><br> <a href="http://www.5dmedia.com">http://www.5dmedia.com</a><br> <a href="http://www.5dmedia.com/bbs">http://www.5dmedia.com/bbs</a> </p> </td> </tr> <tr id="ccv" style="display:none"> <td colspan="4" class="tdbody"><strong><br> <img src="http://vip.5d.cn/allinhands/M/file/cv_logo.gif" width="88" height="31"><br> <br> ChinaVisual</strong><br> <a href="http://www.chinavisual.com">http://www.chinavisual.com</a> <br> <a href="http://forum.chinavisual.com">http://forum.chinavisual.com</a> </td> </tr> <tr id="cbi" style="display:none"> <td colspan="4" class="tdbody"><strong><br> <img src="http://vip.5d.cn/allinhands/M/file/blueidea.gif" width="88" height="31"><br> <br> Blueidea</strong><br> <a href="http://www.bluedidea.com">http://www.bluedidea.com</a> <br> <a href="http://www.blueidea.com/bbs">http://www.blueidea.com/bbs</a></td> </tr> </table> <!--<p align="center"><font color="#006600" style="cursor:hand" onClick=showall()><strong>Show All</strong></font></p>--> <p>&nbsp;</p> <p align="center">Powered By <a href="mailto:allinhands@chinavisual.com">Allinhands</a>.QQ:1707477<br> Notice:No Order these sites above!</p>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框
<script type="text/javascript" src="http://www.smallrain.net/jsimg/webtabs.js"></script> <script language=javascript> function f_start() { var Widget = new WebTabs_widget(480, 320, 10, 10, "absolute") Widget.add(new WebTabs_tab("文件", "page_1", "http://www.smallrain.net/jsimg/images/5.gif")) Widget.add(new WebTabs_tab("编辑", "page_2", "http://www.smallrain.net/jsimg/images/6.gif")) Widget.add(new WebTabs_tab("查看", "page_3", "http://www.smallrain.net/jsimg/images/7.gif")) Widget.add(new WebTabs_tab("插入", "page_4", "http://www.smallrain.net/jsimg/images/16.gif")) Widget.add(new WebTabs_tab("修改", "page_5", "http://www.smallrain.net/jsimg/images/17.gif")) document.getElementById("WebTabs_container").innerHTML = Widget Widget.f_init_tabs() //Widget.f_move_to(120, 20) Widget.f_move_by(20, 20) Widget.f_activate_tab(3) } </script> </head> <body> <div id=WebTabs_container></div> <div id=page_1 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <table><tr><td id="theTD"> <a href="###" onclick="document.getElementById('theTD').bgColor='yellow';">点我一下试试看？</a> </td></tr></table> </td> </tr> </table> </div> </div> <div id=page_2 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <style> u { border-bottom: 1px red dotted; text-decoration:none } </style> <u>Unalloyed stabilization is unceasingly changing Only use English software and data......</u> </td> </tr> </table> </div> </div> <div id=page_3 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <table border="1" onmouseover="document.getElementById('foo').src='http://www.blueidea.com/bbs/icon/icon11.gif'" onmouseout="document.getElementById('foo').src='http://www.blueidea.com/bbs/icon/icon10.gif'"><tr><td style="font-family:华文行楷;color:red">自己动手 丰衣足食</td></tr></table> <table border="1"><tr><td><img id="foo" src="http://www.blueidea.com/bbs/icon/icon10.gif"/></td></tr></table> </td> </tr> </table> </div> </div> <div id=page_4 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <a href="#" onclick="this.style.fontWeight='bold';"><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></a> </td> </tr> </table> </div> </div> <div id=page_5 class=WebTabs-external-page-container> <div class=WebTabs-internal-page-container> <table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%"> <tr> <td width="100%" align="center"> <style> .node{border:1px solid #000000; position: absolute; width: 19px; height: 90px; text-align:center; vertical-align:middle; font-size:9pt; background-color:#CCDDFF } TD {font-size:9pt} </style> <div class="node" style="left: 25px; top: 25px"><table width="100%" height="100%"><tr><td>朱雀</td></tr></table></div> <div class="node" style="left: 55px; top: 25px"><table width="100%" height="100%"><tr><td>玄武</td></tr></table></div> </td> </tr> </table> </div> </div> <script>f_start();</script>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框
<STYLE type=text/css>.sec1 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #eeeeee } .sec2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #ffffff 1px solid; CURSOR: hand; COLOR: #000000; BACKGROUND-COLOR: #d4d0c8 } .main_tab { BORDER-RIGHT: gray 1px solid; BORDER-LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8 } </STYLE> <!--JavaScript部分--> <SCRIPT language=javascript> function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block"; } </SCRIPT> <p align="center"> <!--HTML部分--> <TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0> <TBODY> <TR align=middle height=20> <TD class=sec2 onclick=secBoard(0) width="10%">1</TD> <TD class=sec1 onclick=secBoard(1) width="10%">2</TD> <TD class=sec1 onclick=secBoard(2) width="10%">3</TD> <TD class=sec1 onclick=secBoard(3) width="10%">4</TD> </TR></TBODY></TABLE> <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记--> <TBODY style="DISPLAY: block"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu16.gif"><BR> <table><tr><td style="width:80;height:20;background-color:blue" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='blue'"></td></tr></table> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu24.gif"><BR> <form name="form1" method="post" action=""> <select name="select" style="background:#FF0000;color:white"> <option >凤，风之羽也。</option> <option>ddddddddddddd</option> <option>ddddddddddddddddd</option> <option>eeeeeeeeeeeeeeee</option> <option>eeeeeeeeeeeeeeee</option> </select> </form> </TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu30.gif"><BR> <style type="text/css"> <!-- .formstyle { font-family: "宋体"; font-size: 10pt; color: #FF0000; background-color: #FFFFCC} --> </style> <center> <form name="form1" method="post" action=""> <select name="select" class="formstyle"> <option value="a1.html">menu1</option> <option value="a4.html" selected>menu2</option> <option value="a8.html">menu3</option> </select> </form> <BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性--> <TBODY style="DISPLAY: none"> <TR> <TD vAlign=top align=middle><BR><BR> <TABLE cellSpacing=0 cellPadding=0 width=490 border=0> <TBODY> <TR> <TD><center><img src="tutu34.gif"><br> <table border="0" cellpadding="3" cellspacing="1" bgcolor="#000000"> <tr> <a href="a12.html"><td bgcolor="#FFFFFF" onMouseOver="this.style.color='#ffffff'; this.style.background='#003399'" onMouseOut="this.style.color='#003399'; this.style.background='#ffffff'" style="cursor: hand">恰在似与不似之间</td></a> </tr> </table> </TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></p>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行代码框
<HTML> <HEAD> <script> var Num=4; //这里是增加选项卡的数目 var carNum=2+Num function document.onselectstart() { var obj=event.srcElement if(obj.tagName=="SPAN") { return false; } } function document.onmousedown() { var obj=event.srcElement var pobj=obj.parentElement.id; if(obj.className=="span") { for(i=1;i<carNum;i++) { if(pobj==("btn"+i)) { document.all("td"+i).style.backgroundColor="menu" document.all("btn"+i).style.height=20 content(i) } else { document.all("td"+i).style.backgroundColor="white" document.all("btn"+i).style.height=18 } } } } function content(i) { //这里是菜单名 mnuItem(1,"第一项") mnuItem(2,"图片世界") mnuItem(3,"第三个内容") mnuItem(4,"表格") mnuItem(5,"滚动字幕") //End if(i==1) { span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>" +"<input><br><input><br><input type=submit>" } if(i==2) { span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>" } if(i==3) { span1.innerHTML="<h1>第三个内容</h1>"} if(i==4) { span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>" +"<tr><td>aaaaaaaa</td></tr>" +"<tr><td>bbbbbbbb</td></tr>" +"<tr><td>ccccccccc</td></tr></table>" } if(i==5) { span1.innerHTML="<marquee>" +"这是第五个内容" +"啦啦..？</marquee>" } } function mnuItem(i,con) { document.all("MenuName"+i).innerText=con } </script> <style>td{font-size:9pt} .span{ cursor:default; padding-left:5; padding-top:2; padding-right:5; padding-bottom:0; width:100%; height:100%; } </style> <TITLE></TITLE> <META http-equiv="content-type" content="text/html;charset=gb2312"> </HEAD> <BODY bgcolor=FFFFFF onload=content(1) onselectstart="return false"> <p> <table width=0 onselectstart="return false" bgcolor=menu align=center><tr><td> <table cellpadding=0 cellspacing=0 onselectstart="return false"> <tr height=20> <td valign=bottom> <table cellspacing=0 cellpadding=0 bgcolor=menu> <tr> <td width=1 height=1></td><td width=1 height=1></td> <td bgcolor=white></td><td></td><td></td> </tr> <tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td> <td></td><td bgcolor=black></td><td></td> </tr> <tr><td width=1 bgcolor=white></td><td width=1 height=1></td> <td id=btn1 height=20><span class=span id=MenuName1> </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td> </tr> <tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=menu id=td1></td> </tr> </table> </td> <script> for(i=2;i<carNum;i++) { tdBody="<td valign=bottom>" tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>" tdBody+="<tr>" tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>" tdBody+="<td bgcolor=white><\/td><td></td><td></td>" tdBody+="<\/tr>" tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>" tdBody+="<td></td><td bgcolor=black><\/td><td></td>" tdBody+="<\/tr>" tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>" tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+"> <\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>" tdBody+="<\/tr>" tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>" tdBody+="<\/tr>" tdBody+="<\/table>" tdBody+="<\/td>"; document.write(tdBody) } </script> </td> <td style="border-bottom:1 white solid" width=50> </td> </tr> </table> <div style="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset"> <span id=span1></span><!--这里是内容--> </div> </td></tr></table>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

出处：蓝色理想
责任编辑：moby

上一页 下一页 仿windows选项卡效果拾零 [2]

◎进入论坛网页制作、网站综合版块参加讨论