仿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.</p><p align='center'><b><font color='red'>[1]</font> <a href='/wangye/4597_2.html'>[2]</a> <a href='/wangye/4597_3.html'>[3]</a> <a href='/wangye/4597_4.html'>[4]</a> <a href='/wangye/4597_5.html'>[5]</a> <a href='/wangye/4597_6.html'>[6]</a> <a href='/wangye/4597_7.html'>[7]</a> <a href='/wangye/4597_8.html'>[8]</a> <a href='/wangye/4597_9.html'>[9]</a> <a href='/wangye/4597_10.html'>[10]</a>  ... <a href='/wangye/4597_2.html'>下一页</a> <a href='/wangye/4597_11.html'> >> </a></b></p></SPAN></SPAN></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td width="5%"> </td> <td width="86%"><li>上一篇文章： <a class='LinkPrevArticle' href='/wangye/4596.html' title='文章标题：[JS]用 或 || 来兼容FireFox 作    者：xling 更新时间：2006-11-14 22:32:52'>[JS]用 或 || 来兼容FireFox</a></li><BR> <li>下一篇文章： <a class='LinkNextArticle' href='/wangye/4643.html' title='文章标题：关于textarea的直观换行 作    者：bound0 更新时间：2006-11-17 10:17:11'>关于textarea的直观换行</a></li></td> </tr> </table></td> <td width=5 background=/skin/dline.gif></td> <td class=right_td vAlign=top width=160> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td width=30><IMG height=36 src="/Skin/y_11.gif" width=30></td> <td class=filter2 style="PADDING-TOP: 3px" background=/Skin/y_12.gif><FONT color=#ffffff>广告</FONT></td> <td width=7><IMG height=36 src="/Skin/y_13.gif" width=7></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td> <script language='javascript' src='/AD/200609/6.js'></script></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td width=30><IMG height=36 src="/Skin/y_11.gif" width=30></td> <td class=filter2 style="PADDING-TOP: 3px" background=/Skin/y_12.gif><FONT color=#ffffff>阅读top10</FONT></td> <td width=7><IMG height=36 src="/Skin/y_13.gif" width=7></td> </tr> </table> <table width="100%" > <tr> <td><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4662.html" title="[突破]在线编辑器任意设置字号" target="_self">[突破]在线编辑器任意…</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4661.html" title="[JS]点出统计器" target="_self">[JS]点出统计器</a></td></tr><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4659.html" title="[效果]JS折叠菜单" target="_self">[效果]JS折叠菜单</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4658.html" title="javascript的函数" target="_self">javascript的函数</a></td></tr><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4655.html" title="怎么用javascript进行拖拽" target="_self">怎么用javascript…</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4654.html" title="百分百弹窗" target="_self">百分百弹窗</a></td></tr><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4653.html" title="hta应用—代码统计工具" target="_self">hta应用—代码统计工具</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4652.html" title="小方框中浏览大图" target="_self">小方框中浏览大图</a></td></tr><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4648.html" title="js版sliderBar(滑动条)控件" target="_self">js版sliderBar(滑动条…</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4647.html" title="JS代码格式化和语法着色" target="_self">JS代码格式化和语法着…</a></td></tr><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4646.html" title="好玩的样式—放大效果" target="_self">好玩的样式—放大效果</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4645.html" title="用css制作星级评分" target="_self">用css制作星级评分</a></td></tr><tr><td width="10" valign="top" class="remen"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen"><a class="" href="/wangye/4643.html" title="关于textarea的直观换行" target="_self">关于textarea的直观换…</a></td></tr><tr><td width="10" valign="top" class="remen1"><img src="/wangye/images/article_common9.gif" alt="普通文章"></td><td class="remen1"><a class="" href="/wangye/4597.html" title="仿windows选项卡效果拾零" target="_self">仿windows选项卡效果拾…</a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table> <table width=778 align="center" bgcolor="#FFFFFF" class=main_tdbg_760> <tr> <td vAlign=top ><SPAN class=f14><IMG height=13 src="/qingxin/gsearch.gif" width=13> <A href="http://www.baidu.com/s?tn=xuediannao&word=仿windows选项卡效果拾零" target=_blank>查看<STRONG><FONT color=#ff0000>仿windows选项卡效果拾零</FONT></STRONG>全部内容</A></SPAN> <div align=center> </div></td> </tr> </table> <table width=778 align=center bgcolor="#FFFFFF" class=main_tdbg_760> <tr> <td bgColor=#ffffff> <div align=center> <script language='javascript' src='/AD/200609/7.js'></script> </div> </tr> </table> <table cellSpacing=0 cellPadding=0 width=778 align=center border=0> <tr> <td class=menu_bottombg align=middle>| <A class=Bottom onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.xuediannao.com');" href="#">设为首页</A> | <A class=Bottom href="javascript:window.external.addFavorite('http://www.xuediannao.com','轻松学电脑');">加入收藏</A> | <A class=Bottom href="mailto:">联系站长</A> | <A class=Bottom href="/link.html" target=_blank>友情链接</A> | <A class=Bottom href="/Copyright.asp" target=_blank>版权申明</A> | <script language='javascript' src='/AD/tongji.js'></script>|<tr> <td class=bottom_bg height=80> <table cellSpacing=0 cellPadding=0 width="90%" align=center border=0> <tr> <td><IMG height=80 src="/Skin/Ocean/bottom_left.gif" width=9> <td align=middle width="80%"><div align="center">本站提供:<a style="color:#000000 " href="http://www.xuediannao.com/cainiao/Index.html" target="_blank">电脑教程</a> <a style="color:#000000 "href="http://www.xuediannao.com/wangye/Index.html" target="_blank">网页制作</a> <a style="color:#000000 "href="http://www.xuediannao.com/tuxing/Flash/Index.html" target="_blank">Flash教程 </a><a style="color:#000000 "href="http://www.xuediannao.com/tuxing/PhotoShop/Index.html" target="_blank"> PhotoShop教程</a>等免费教程。<br> Copyright © 2006-2008<a style="color:#000000 " href="http://www.xuediannao.com/" target="_blank">轻松学电脑</a>All Rights Reserved<A href="mailto:"></A> <td align=right><IMG height=80 src="/Skin/Ocean/bottom_r.gif" width=9> </tr> </table> </tr> </table> </body> </html> <script language='javascript' src='/AD/200609/8.js'></script> <script language='javascript' src='/AD/200609/9.js'></script> <script language='javascript' src='/AD/200609/10.js'></script>