位置：首页>> 网络编程>> JavaScript>> 仿windows选项卡效果拾零

仿windows选项卡效果拾零

作者：marvellous　　发布时间：2013-07-13 09:33:42　

标签：

仿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％"> </td> </tr> <tr id="c5d" style="display:none"> <td colspan="4" class="tdbody"> <p><strong><br> <img src="https://img.aspxhome.com/file/UploadPic/20071/2007131101432563.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="https://img.aspxhome.com/file/UploadPic/20071/2007131101433336.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="https://img.aspxhome.com/file/UploadPic/20071/2007131101433528.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> </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", "/article/UploadPic/20071/2007131101433713.gif"))Widget.add(new WebTabs_tab("编辑", "page_2", "/article/UploadPic/20071/2007131101434724.gif"))Widget.add(new WebTabs_tab("查看", "page_3", "/article/UploadPic/20071/2007131101435188.gif"))Widget.add(new WebTabs_tab("插入", "page_4", "/article/UploadPic/20071/2007131101435423.gif"))Widget.add(new WebTabs_tab("修改", "page_5", "/article/UploadPic/20071/2007131101436391.gif"))document.getElementById("WebTabs_container").innerHTML = WidgetWidget.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 changingOnly 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> <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"> <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 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="http://www.blueidea.com/tech/web/2006/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> <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="http://www.blueidea.com/tech/web/2006/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> <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="http://www.blueidea.com/tech/web/2006/tutu30.gif"><BR><style type="text/css"></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> <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="http://www.blueidea.com/tech/web/2006/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+Numfunction document.onselectstart(){var obj=event.srcElement if(obj.tagName=="SPAN"){return false;}}function document.onmousedown(){var obj=event.srcElementvar 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,"滚动字幕")//Endif(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=/article/UploadPic/20071/2007131101441756.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 全部选择提示：你可先修改部分代码，再运行]

投稿

仿windows选项卡效果拾零

猜你喜欢