仿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%">Bluedie</p><p align='center'><b><font color='red'>[1]</font> <a href='/Tech/WebDesign/JSTX/200703/2761_2.html'>[2]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_3.html'>[3]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_4.html'>[4]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_5.html'>[5]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_6.html'>[6]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_7.html'>[7]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_8.html'>[8]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_9.html'>[9]</a> <a href='/Tech/WebDesign/JSTX/200703/2761_10.html'>[10]</a>  ... <a href='/Tech/WebDesign/JSTX/200703/2761_2.html'>下一页</a> <a href='/Tech/WebDesign/JSTX/200703/2761_11.html'> >> </a></b></p> <center></center></td> </tr> <tr> <td height="25" align='right' class="Article_tdbgall">教程录入：jerome    责任编辑：jerome </td> </tr> <tr> <td height="25"><li>上一篇教程： <a class='LinkPrevArticle' href='/Tech/WebDesign/JSTX/200703/2760.html' title='文章标题：[JS]用 或 || 来兼容FireFox 作    者：xling 更新时间：2007-3-30 12:42:34'>[JS]用 或 || 来兼容FireFox</a></li><br> <li>下一篇教程： <a class='LinkNextArticle' href='/Tech/WebDesign/JSTX/200703/2764.html' title='文章标题：用javascript实现Base64编码 作    者：tane274 更新时间：2007-3-30 12:42:36'>用javascript实现Base64编码</a></li></td> </tr> <tr> <td height="25" align='right' class="Article_tdbgall">【字体：<a href="javascript:fontZoomA();" class="top_UserLogin">小</a> <a href="javascript:fontZoomB();" class="top_UserLogin">大</a>】【<a href="/Tech/Comment.asp?ArticleID=2761" target="_blank">发表评论</a>】【<a href="/User/User_Favorite.asp?Action=Add&ChannelID=1002&InfoID=2761" target="_blank">加入收藏</a>】【<a href="/Tech/SendMail.asp?ArticleID=2761" target="_blank">告诉好友</a>】【<a href="/Tech/Print.asp?ArticleID=2761" target="_blank">打印此文</a>】【<a href="javascript:window.close();">关闭窗口</a>】 </td> </tr> </table> <br> <table style="WORD-BREAK: break-all" cellSpacing=0 cellPadding=0 width="575" border=0> <tr> <td class=main_shadow></td> </tr> <tr> <td class=main_title_575><B>相关教程</B></td> </tr> <tr> <td class=main_tdbg_575> <a class='LinkArticleCorrelative' href='/Tech/WebGuide/Experience/200707/3288.html' title='文章标题：图文教程：Discuz!5.5 JS的调用 作    者：佚名 更新时间：2007-7-24 15:02:52' target="_self">图文教程：Discuz!5.5 JS的调用</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3281.html' title='文章标题：用javascript 转换外部链接样式 作    者：幻想曲 更新时间：2007-7-19 17:17:27' target="_self">用javascript 转换外部链接样式</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3278.html' title='文章标题：用javascript实现select的美化 作    者：jxdawei 更新时间：2007-7-19 17:17:08' target="_self">用javascript实现select的美化</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3270.html' title='文章标题：javascript 的事件冒泡 demo 作    者：Realazy 更新时间：2007-7-19 17:15:39' target="_self">javascript 的事件冒泡 demo</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3269.html' title='文章标题：面向对象的 javascript 作    者：mozart0 更新时间：2007-7-19 17:15:35' target="_self">面向对象的 javascript</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDesign/JSTX/200707/3267.html' title='文章标题：仿6room网站图片链接效果 作    者：webflash 更新时间：2007-7-19 17:15:23' target="_self">仿6room网站图片链接效果</a><br><a class='LinkArticleCorrelative' href='/Tech/WebDraw/FW/200704/3213.html' title='文章标题：打破玻璃的动画效果 作    者：jsuper 更新时间：2007-4-27 9:58:19' target="_self">打破玻璃的动画效果</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3210.html' title='文章标题：[Flash] 图片轮换效果 作    者：HBrO 更新时间：2007-4-27 9:58:06' target="_self">[Flash] 图片轮换效果</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3200.html' title='文章标题：flash8 绘制至尊土豆 作    者：lele 更新时间：2007-4-27 9:57:53' target="_self">flash8 绘制至尊土豆</a><br><a class='LinkArticleCorrelative' href='/Tech/MultiMedia/FLASH/200704/3197.html' title='文章标题：AS+JS的Flash网站无刷新定位技术 作    者：HBrO 更新时间：2007-4-27 9:57:47' target="_self">AS+JS的Flash网站无刷新定位技术</a><br></td> </tr> <tr> <td class=main_shadow></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=575 border=0> <tr> <td height=25 class=main_title_575><b>网友评论：</b>（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）</td> </tr> <tr> <td class=main_tdbg_575 height=30> <script language='javascript' src='/Tech/Comment.asp?Action=JS&CommentNum=10&ArticleID=2761'></script></td> </tr> </table> </td> </tr> </table> <!-- ********网页中部代码结束******** --> <!-- ********网页底部代码开始******** --><iframe src="/popbbs.asp" width="0" height="0" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <table cellSpacing=0 cellPadding=0 width=776 align=center border=0> <tr> <td class=F11 align=middle background=/Skin/17zm_v6/bottom_r1_c1.jpg height=33><A class=bottom href="http://www.miibeian.gov.cn/" target=_blank>湘ICP备05010790号</A> <FONT color=#ffffff>{$Wap}</FONT></td> </tr> <tr> <td align=middle background=/Skin/17zm_v6/bottom_r2_c1.jpg height=25><A class=bottom href="/SiteInfo.asp?info=about" target=_blank>关于我们</A> | <A class=bottom href="/SiteInfo.asp?info=history" target=_blank>版本历史</A> | <A class=bottom href="/SiteInfo.asp?info=Contact" target=_blank>联系方法</A> | <A class=bottom href="/SiteInfo.asp?info=Privacy" target=_blank>隐私条例</A> | <A class=bottom href="/SiteInfo.asp?info=linkus" target=_blank>链接我们</A> | <A class=bottom href="/SiteInfo.asp?info=Advertise" target=_blank>广告服务</A> | <A class=bottom href="/SiteInfo.asp?info=FAQ" target=_blank>常见问题</A> | <A class=bottom href="/FriendSite" target=_blank>友情链接</A> | <A class=bottom href="/Announcelist.asp" target=_blank>网站公告</A> | <A class=bottom onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.17zm.net');" href="/$">设为首页</A> | <A class=bottom href="javascript:window.external.addFavorite('http://www.17zm.net','织梦建站服务网');">收藏本站</A></td> </tr> <tr> <td align=middle background=/Skin/17zm_v6/bottom_r3_c1.jpg height=26><SPAN class=f11>Copyright © 2001-2006 <STRONG>17zm.NET</STRONG> All Rights Reserved.  <A class=bottom href="http://zmstudio.17zm.net/" target=_blank><IMG height=17 alt=织梦建站工作室 src="/Skin/17zm_v6/zmci_84-48.gif" width=29 align=absMiddle border=0></A>[<A class=bottom href="http://zmstudio.17zm.net/" target=_blank><STRONG>织梦建站工作室</STRONG></A>]™荣誉出品. Since <STRONG>2001</STRONG></SPAN></td> </tr> <tr> <td height=7><IMG id=bottom_r4_c1 height=7 alt="" src="/Skin/17zm_v6/bottom_r4_c1.jpg" width=776 border=0 name=bottom_r4_c1></td> </tr> </table> <iframe src="/stat.htm" width="0" height="0" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <!-- ********网页底部代码结束******** --> </body> </html> <NOSCRIPT><IFRAME src='*' Width='0' Height='0'></IFRAME></NOSCRIPT>