仿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>
 提示：您可以先修改部分代码再运行

<!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>
 提示：您可以先修改部分代码再运行

<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=''" onmouseout="document.getElementById('foo').src=''"><tr><td style="font-family:华文行楷;color:red">自己动手 丰衣足食</td></tr></table> <table border="1"><tr><td><img id="foo" src=""/></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>
 提示：您可以先修改部分代码再运行

<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>
 提示：您可以先修改部分代码再运行

<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>
 提示：您可以先修改部分代码再运行

<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> <script language="javascript"> <!-- function secBoard(n,x,y) { 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";} weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅"; } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">当前位置：展馆分布 > <span id="weizi"><b>A</b>展馆<b>1</b>楼展厅</span></td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td> <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td> <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td> <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody> </table> </td> </tr> </table>
 提示：您可以先修改部分代码再运行

本文仅对初学者对仿windows选项卡有一个系统全面的了解,网上流传有好多种，例子是不胜枚举的:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <base href="http://www.cn-lan.com/"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> <script language="JavaScript"> var txtstr_1="&nbsp;&nbsp;QQ:28983016 Email:<a href=mailto:451200@126.com>451200@126.com</a>"; var txtstr_2="&nbsp;&nbsp;需要软件的朋友可以与我联系。"; var txtstr_3="&nbsp;&nbsp;论坛现在暂时关闭，请朋友们在QQ上联系." var txtstr_4="&nbsp;&nbsp;孤独的时候便走向自然；<br>寂寞的时候便走向音乐；<br>失败的时候便走向憧憬；<br>委屈的时候便走向创造和友情。<br>" function changediv(n){ for(i=1;i<=5;i++){ eval("document.getElementById('s'+i+'').className='under'+n+''"); //此次循环的作用是分别将s开头的ID处的下边界设置为相应的颜色 } for(i=1;i<=4;i++){ eval("document.getElementById('c"+i+"').className='a"+n+"'"); //此次循环初始化所有的选项卡按钮的背景图片为cb0.gif，银灰色 } eval("document.getElementById('c"+n+"').className='t"+n+"'"); //然后设置鼠标移动到的相应位置的背景图片为相应的图片，修改对应的样式表。 eval("document.getElementById('bodyt').className='body"+n+"'"); //修改选项卡下半部的样式，使其的色彩与上半部的图片相适应。 bodytxt=eval('txtstr_'+n); if(bodytxt==""){ alert("数据正在下载，请稍候!");} else { document.getElementById("txt1").innerHTML=bodytxt; //设置选项卡主体部分相应的文字。 } } </script> <style type="text/css"> <!-- .t1 { background-image: url(cb1.gif); border-bottom-width: medium; border-bottom-style: none; border-right-width: 1px; border-right-style: solid; border-right-color: #88c027; } .t2 { background-image: url(cb2.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #eac751; } .t3 { background-image: url(cb3.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #ee6f69; } .t4 { background-image: url(cb4.gif); padding-top: 3px; border-right-width: 1px; border-right-style: solid; border-right-color: #7eaffb; } .t0 { background-image: url(cb0.gif); padding-top: 3px; border-bottom-width: 0px; border-bottom-style: none; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } --> </style> <style type="text/css"> <!-- td { font-size: 12px; line-height: 16px; } .d1 { padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d2{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d3{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .d4{ padding-top: 3px; border-bottom-width: medium; border-bottom-style: none; } .under1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; } .under2 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eac751; } .under3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee6f69; } .under4 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #7eaffb; } .body1 { background-color: #d6efb5; border-top: 0px none; border-right: 1px solid #88c027; border-bottom: 1px solid #88c027; border-left: 1px solid #88c027; } .body2 { background-color:#fff7be; border-top: 0px none #eac751; border-right: 1px solid #eac751; border-bottom: 1px solid #eac751; border-left: 1px solid #eac751; } .body3 { background-color: #ffe5e3; border-top: 0px none; border-right: 1px solid #ee6f69; border-bottom: 1px solid #ee6f69; border-left: 1px solid #ee6f69; } .body4 { background-color: #d4eaff; border-top: 0px none; border-right: 1px solid #7eaffb; border-bottom: 1px solid #7eaffb; border-left: 1px solid #7eaffb; } .firstunderline { border-bottom-width: medium; border-bottom-style: none; } .bodytop { border-top-width: medium; border-top-style: none; } --> </style> <style type="text/css"> <!-- .a1 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a2 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eac751; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a3 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ee6f69; background-image: url(cb0.gif); border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .a4 { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #7eaffb; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } .temp { background-image: url(cb0.gif); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #88c027; border-right-width: 1px; border-right-style: solid; border-right-color: #AEABA9; } --> </style> </head> <body> <table width="294" border="0" align="center" cellpadding="0" cellspacing="0"> <tr valign="bottom"> <td id="s1" width="8" height="19" class="under1"><br> </td> <td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">我佛山人</td> <td id="s2" width="8" class="under1"><br> </td> <td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">红色黑客</td> <td id="s3" width="8" class="under1"><br> </td> <td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">蓝色月光</td> <td id="s4" width="8" class="under1"><br> </td> <td id="c4" width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飘客</td> <td id="s5" width="49" class="under1"><br> </td> </tr> </table> <table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody> <tr> <td valign="top"><br><div id="txt1"> <script language="javascript"> document.write(txtstr_1); </script> </div>&nbsp;</td> </tr> </tbody> </table> <p>&nbsp;</p>
 提示：您可以先修改部分代码再运行

<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Generator" content="EditPlus"> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> body,table,tr,td{ font-size:12px; color:#000000; } .sec1 { background-color: #99CC99; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF } .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold; } .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray; } </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <table width="588" border="0" cellspacing="1" cellpadding="4" align="center"> <tr> <td width="82%">当前位置：展馆分布 > <span id="weizi">A展馆1楼展厅</td> <td width="18%"></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#000000"></td> </tr> <tr> <td colspan="2" height="4"></td> </tr> <tr> <td colspan="2"> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableA> <tr height=20 align=center> <td class=sec1 id="A7" onClick="secBoard()">A展馆1楼展厅</td> <td class=sec1 id="A8" onClick="secBoard()">B展馆1楼展厅</td> <td class=sec1 id="A9" onClick="secBoard()">B展馆2楼展厅</td> <td class=sec1 id="A10" onClick="secBoard()">C展馆1楼展厅</td> <td class=sec1 id="A11" onClick="secBoard()">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTableB> <tr height=20 align=center> <td class=sec2 id="B1" onClick="secBoard()">A展馆1楼展厅</td> <td class=sec1 id="B2" onClick="secBoard()">A展馆2楼展厅</td> <td class=sec1 id="B3" onClick="secBoard()">B展馆1楼展厅</td> <td class=sec1 id="B4" onClick="secBoard()">B展馆2楼展厅</td> <td class=sec1 id="B5" onClick="secBoard()">C展馆1楼展厅</td> <td class=sec1 id="B6" onClick="secBoard()">C展馆2楼展厅</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align="center"> 一 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 二 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 三 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align="center"> 四 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 五 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 六 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 七 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 八 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 九 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 十 </td> </tr> </tbody><tbody style="display:none;"> <tr> <td align="center"> 十一 </td> </tr> </tbody> </table> <!--放在这里安全点 #:-) --> <script language="javascript"> <!-- var lastObj="B1",strClassBlur="sec1",strClassActive="sec2"; var tbody=document.getElementById("mainTable").getElementsByTagName("TBODY"); var secTableA=document.getElementById("secTableA"); var secTableB=document.getElementById("secTableB"); function secBoard() { var n=event.srcElement.id; if(lastObj == n)return; if(n.charAt(0) != lastObj.charAt(0)) secTableA.swapNode(secTableB); eval(n).className=strClassActive; titleChange(eval(n).innerText); eval(lastObj).className=strClassBlur; tbody[getNum(lastObj)].style.display="none"; tbody[getNum(n)].style.display="block"; lastObj=n; } function getNum(str) { return parseInt(str.substr(1))-1; } function titleChange(text) { weizi.innerText=text; } //--> </script> </td> </tr> </table>
 提示：您可以先修改部分代码再运行

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <style type="text/css"> <!-- body{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;background-color: #336699;color:#000000;} td, div, input, textarea{font-family: 'MS Shell Dlg', 宋体, Tahoma;font-size: 12px;cursor: default;} .title{background-color: #000080;color:#fdf7d3;padding: 1;font-family:宋体;font-size:12px;} .up{background-color: #cccccc;color:#000000;border: 2px outset #ffffff} .down{background-color: #cccccc;border:2px inset #ffffff} .up1{background-color: #cccccc;color: #000000;border: 1px outset #ffffff} .down1{background-color:#cccccc;border:1px inset #ffffff} .l { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:18} .lc { background-color: #cccccc; height: 18px; border-left: 2px outset #ffffff; border-right: 2px outset #ffffff; color:#000000; border-top: 2px outset #ffffff; padding-top: 2;height:20} .l-h { background-color: #cccccc; border-left: 2px outset #ffffff ; border-top: 2px outset #ffffff;color:#000000; } .l-c { background-color: #cccccc; border-top: 2px outset #ffffff } .l-r { background-color: #cccccc; border-right: 2px outset #ffffff; border-top: 2px outset #ffffff;color:#000000;} .l-hc { background-color: #cccccc; border-left: 2px outset #ffffff;color:#000000;} .l-cc { background-color: #cccccc;color:#000000; } .l-rc { background-color: #cccccc; border-right: 2px outset #ffffff;color:#000000;} td{color:#000000;} --> </style> <title>显示属性－www.51windows.Net</title> </head> <body style="border:outset 1 #ffffff;margin: 0;background-color: #cccccc;padding:3px" scroll=no> <SCRIPT LANGUAGE="JavaScript"> <!-- function restore() { td1.className="l";td2.className="l";td3.className="l";td4.className="l";td5.className="l";td6.className="l"; td_1.className="l-h";td_2.className="l-c";td_3.className="l-c";td_4.className="l-c";td_5.className="l-c";td_6.className="l-c"; w1.style.display="none";w2.style.display="none";w3.style.display="none";w4.style.display="none";w5.style.display="none";w6.style.display="none"; } function c1() { td1.className="lc"; td_1.className="l-hc"; w1.style.display="block"; } function c2() { td2.className="lc"; td_2.className="l-cc"; w2.style.display="block"; } function c3() { td3.className="lc"; td_3.className="l-cc"; w3.style.display="block"; } function c4() { td4.className="lc"; td_4.className="l-cc"; w4.style.display="block"; } function c5() { td5.className="lc"; td_5.className="l-cc"; w5.style.display="block"; } function c6() { td6.className="lc"; td_6.className="l-cc"; w6.style.display="block"; } //--> </SCRIPT> <form name="free" method="post" target="_target"> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="400" height="61"> <tr> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c1();><div id="td1" class="lc">背景</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c2();><div id="td2" class="l">屏保</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c3();><div id="td3" class="l">外观</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c4();><div id="td4" class="l">Web</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c5();><div id="td5" class="l">效果</div></td> <td width="50" height="20" align="center" valign="bottom" onclick=restore();c6();><div id="td6" class="l">设置</div></td> <td width="50" height="20" align="center" valign="bottom" ></td> <td width="50" height="20" align="center" valign="bottom"></td> </tr> <tr style=""> <td width="50" height="1" align="center" class="l-hc" id="td_1" > </td> <td width="50" height="1" align="center" class="l-c" id="td_2"> </td> <td width="50" height="1" align="center" class="l-c" id="td_3"> </td> <td width="50" height="1" align="center" class="l-c" id="td_4"> </td> <td width="50" height="1" align="center" class="l-c" id="td_5"> </td> <td width="50" height="1" align="center" class="l-c" id="td_6"> </td> <td width="50" height="1" align="center" class="l-c" id="td_"> </td> <td width="50" height="1" align="center" class="l-r" id="td_"> </td> </tr> <tr> <td width="398" height="360" class="up" colspan="8" style="border-top-style: solid; border-top-width: 0; padding: 5"> <p align="center"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="325"> <tr> <td width="100%" height="280"> <div align="center"> <center> <div style="display:" id=w1><h1>AAAAAAAAAAAA</h1></div> <div style="display:none" id=w2><h1>BBBBBBBBBBBBB</h1></div> <div style="display:none" id=w3><h1>CCCCCCCCCCCCC</h1></div> <div style="display:none" id=w4><h1>DDDDDDDDDDDD</h1></div> <div style="display:none" id=w5><h1>EEEEEEEEEEEEEE</h1></div> <div style="display:none" id=w6><h1>FFFFFFFFFFFFFFFFF</h1></div> </center> </div> </td> </tr> </table> </div> </td> </tr> </center> </table> </div> </form> </body> </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> <style type="text/css"> <!-- * { margin: 0; padding:0 } body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background-color: #666666; font-size: 12px; color: #000000; } #container { text-align: left; width: 760px; height: 400px; background-color: #FFFFFF; padding: 20px; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background-color: #FFFFFF; height: 28px; } #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px; padding: 0 15px 0 15px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title #tag4 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title #tag4 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title #tag5 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title #tag5 a:hover span{ display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title .selectli4 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px; } #container #title a .selectspan4 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title .selectli5 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px; } #container #title a .selectspan5 { display: block; background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #3A81C8; border-right-color: #3A81C8; border-bottom-color: #3A81C8; border-left-color: #3A81C8; background-color: #DFEBF7; } .content2 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #ff950b; border-right-color: #ff950b; border-bottom-color: #ff950b; border-left-color: #ff950b; background-color: #FFECD2; } .content3 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FE74B8; border-right-color: #FE74B8; border-bottom-color: #FE74B8; border-left-color: #FE74B8; background-color: #FFECF5; } .content4 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #00988B; border-right-color: #00988B; border-bottom-color: #00988B; border-left-color: #00988B; background-color: #E8FFFD; } .content5 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #A8BC1F; border-right-color: #A8BC1F; border-bottom-color: #A8BC1F; border-left-color: #A8BC1F; background-color: #F7FAE2; } .hidecontent {display:none;} --> </style> <script language="javascript"> function switchTag(tag,content) { // alert(tag); // alert(content); for(i=1; i <6; i++) { if ("tag"+i==tag) { document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i; }else{ document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className=""; } if ("content"+i==content) { document.getElementById(content).className=""; }else{ document.getElementById("content"+i).className="hidecontent"; } document.getElementById("content").className=content; } } </script> </head> <body> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li> </ul> </div> <div id="content" class="content1"> <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div> <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div> <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div> <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div> <div id="content5" class="hidecontent">5、这是使用到的两个图片： <table width="58%" border="1" cellspacing="2" cellpadding="0"> <tr> <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td> </tr> </table> </div> </div> </div> </body> </html>
 提示：您可以先修改部分代码再运行

<html> <head> <style type="text/css"> <!-- .tablestyle1 { font: normal 12px "宋体", Arial; color: #777777; text-decoration: none; text-align: center; vertical-align: middle; border-top: 1px solid #E4E4E4; border-right: 1px solid #4E4E4E; border-bottom: 1px solid #4E4E4E; border-left: 1px solid #E4E4E4; background: #FDFDFD; } .Tdstyle1 { background: #FDFDFD; border-top: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; border-left: 1px solid #E6E6E6; cursor: hand; text-decoration: none; } .Titledivstyle { text-align: justify; text-justify:Distribute-all-lines; } .inf1 { color: #EDB905; } .inf2 { color: #107460; } body { margin-left: 0px; margin-top: 0px; } --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function iniINF(Init)//在网页初始化时，将各项详细信息隐藏的过程。 { if(Init) { inf1.style.display='none'; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; } } function showinf(theObj)//查找并显示对应详细信息的过程。 { switch(theObj) { case 'inf1'://当鼠标点击目标为“银行汇款”时的处理过程。 with(findObj(theObj)) if(style.display=='none')//检查当前鼠标点击的选项的详细信息是否已处于显示状态。若已显示，则关闭；若未显示，则弹出。 { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu1.style.color='#FF0000'; Menu1.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu1.style.color=''; Menu1.style.background=''; } break; case 'inf2'://当鼠标点击目标为“邮局汇款”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf1.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu2.style.color='#FF0000'; Menu2.style.background='#E1F8C2'; Menu1.style.color=''; Menu1.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu2.style.color=''; Menu2.style.background=''; } break; case 'inf3'://当鼠标点击目标为“网上支付”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf1.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu3.style.color='#FF0000'; Menu3.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu1.style.color=''; Menu1.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu3.style.color=''; Menu3.style.background=''; } break; case 'inf4'://当鼠标点击目标为“电话充值”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf1.style.display="none"; inf5.style.display="none"; inf6.style.display="none"; Menu4.style.color='#FF0000'; Menu4.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu1.style.color=''; Menu1.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu4.style.color=''; Menu4.style.background=''; } break; case 'inf5'://当鼠标点击目标为“手机充值”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf1.style.display="none"; inf6.style.display="none"; Menu5.style.color='#FF0000'; Menu5.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu1.style.color=''; Menu1.style.background=''; Menu6.style.color=''; Menu6.style.background=''; } else { style.display='none'; Menu5.style.color=''; Menu5.style.background=''; } break; case 'inf6'://当鼠标点击目标为“U币卡充值”时的处理过程。 with(findObj(theObj)) if(style.display=='none') { style.display=''; inf2.style.display="none"; inf3.style.display="none"; inf4.style.display="none"; inf5.style.display="none"; inf1.style.display="none"; Menu6.style.color='#FF0000'; Menu6.style.background='#E1F8C2'; Menu2.style.color=''; Menu2.style.background=''; Menu3.style.color=''; Menu3.style.background=''; Menu4.style.color=''; Menu4.style.background=''; Menu5.style.color=''; Menu5.style.background=''; Menu1.style.color=''; Menu1.style.background=''; } else { style.display='none'; Menu6.style.color=''; Menu6.style.background=''; } break; } } // Example: obj = findObj("image1"); function findObj(theObj, theDoc)//查找对象函数。 { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } //--> </script> </head> <body onLoad="iniINF(true);"> <center><div align="center"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1"> <tr> <td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">银行汇款</td> <td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">邮局汇款</td> <td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">网上支付</td> <td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">电话充值</td> <td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手机充值</td> <td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U币卡充值</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf1"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf1"> <tr> <td height="20"><div align="justify">汇款信息：</div></td> </tr> <tr> <td height="20">&nbsp;</td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">开 户 银 行</td> <td width="360"><div align="left">：深圳市商业银行XXX支行</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">帐 &nbsp; 户&nbsp; 名</td> <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">帐 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 号</td> <td><div align="left">：2326 5665 5669 2233 xxxx xxxx</div></td> </tr> </table></td> </tr> <tr> <td height="20">&nbsp;</td> </tr> <tr> <td height="20"><div align="justify">建议大家在银行汇款时……</div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="inf2"> <tr> <td height="20"><div align="justify">汇款信息：</div></td> </tr> <tr> <td height="20">&nbsp;</td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle1">通 讯 地 址</td> <td width="360"><div align="left">：深圳市……</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">收 &nbsp; 款&nbsp; 人</td> <td><div align="left">：深圳市XXXXXXXXX有限公司</div></td> </tr> </table></td> </tr> <tr> <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="70" class="Titledivstyle">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 编 </td> <td><div align="left">：xxxxxx</div></td> </tr> </table></td> </tr> <tr> <td height="20">&nbsp;</td> </tr> <tr> <td height="20"><div align="justify">建议大家在邮局汇款时……</div></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf3"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#FD5A02">“网上支付”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#3C8FEC">“电话充值”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#9E3CE8">“手机充值”</font>的信息。</td> </tr> </table></td> </tr> <tr> <td height="200" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="200" valign="middle">这是<font color="#62A70E">“U币卡充值”</font>的信息。</td> </tr> </table></td> </tr> </table> </td> </tr> </table> </div></center> </body></html>
 提示：您可以先修改部分代码再运行

在不知道选项卡的数目的情况下如何判断第几个选项卡开始超过选项栏长度，需要换行显示

以上所列几种选项卡虽然表现形式不同，但一般是几个选项卡（导航标签）的合计宽度不应超过其选项栏内容的宽度。
海娃的那个例子也不错,跟我引述的第三个例子类似。

<style> body {font-size:12px;font-family:宋体} ul.TabBarLevel1{ list-style:none; margin:0; padding:0; height:29px; background-image:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_bk.gif); } ul.TabBarLevel1 li{ float:left; padding:0; height:29px; margin-right:1px; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li a{ display:block; line-height:29px; padding:0 20px; color:#333; background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_right_bk.gif) right top no-repeat; white-space: nowrap; } ul.TabBarLevel1 li.Selected{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat; } ul.TabBarLevel1 li.Selected a{ background:url(http://pics.taobao.com/2k5/sys/component/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat; } ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{ color:#333; } ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{ color:#F30; text-decoration:none; } ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{ color:#000; } ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{ color:#F30; text-decoration:none; } div.HackBox { padding : 2px 2px ; border-left: 2px solid #6697CD; border-right: 2px solid #6697CD; border-bottom: 2px solid #6697CD; display:none; } </style> <div id="Whatever"> <ul class="TabBarLevel1" id="TabPage1"> <li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li> <li id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li> <li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li> <li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li> </ul> <div id="cnt"> <div id="dTab1" class="HackBox">我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。 </div> <div id="dTab2" class="HackBox" style="display:block">【※卡秀儿精品屋※】 </div> <div id="dTab3" class="HackBox">学习是件头疼的事，为了能活下去我不得不学习 </div> <div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁 </div> </div> </div> <script language="JavaScript"> //Switch Tab Effect function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage); for(var i=0;i<oItem.children.length;i++){ var x = oItem.children(i); x.className = ""; var y = x.getElementsByTagName('a'); y[0].style.color="#333333"; } document.getElementById(tabid).className = "Selected"; var dvs=document.getElementById("cnt").getElementsByTagName("div"); for (var i=0;i<dvs.length;i++){ if (dvs[i].id==('d'+tabid)) dvs[i].style.display='block'; else dvs[i].style.display='none'; } } </script>
 提示：您可以先修改部分代码再运行

<html> <head> <title>test</title> <style> td,a,body{font-size:9pt;} .DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA;color:#000000} .DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF} .DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;} </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <script language="javascript"> var AroundInfoArray=new Array(); AroundInfoArray[0]="咖啡厅的内容"; AroundInfoArray[1]="学校的内容"; AroundInfoArray[2]="酒店的内容"; function ChangeFocus(obj) { for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++) { if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj) { document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus"; document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i]; }else{ document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur"; } } } </script> <table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"><tr><td width="84" valign="top"> <table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble"> <tr><td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">咖啡厅</td></tr> <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">学校</td></tr> <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">酒店</td></tr> <tr><td style="border-right:solid 1px #eeeeee">&nbsp;</td></tr> </table> </td><td width="360"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content"> <tr><td height="406" valign="top" style="padding:4px" id="DivAroundContent">内容</td></tr> </table> </td></tr> </table> <script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);</script> </body></html>
 提示：您可以先修改部分代码再运行

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>menu</title> <base target="_blank"> <style> A:link {COLOR: #0000cc; TEXT-DECORATION: underline} A:visited {COLOR: #551a8b; TEXT-DECORATION: underline} A:active{COLOR: #ff0000; TEXT-DECORATION: none} A:hover {COLOR: #ff0000; TEXT-DECORATION: underline} body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #ffffff; color: #000000; font-size: 12px; } td{ font-size:12px; line-height: 150%; } .white {color: #ffffff} .cardNormal { CURSOR: hand; COLOR: #000000; font-size:12px; BACKGROUND-COLOR: #FFFFFF; border-top: 1px solid #0A6CCE; border-right: 1px solid #0A6CCE; border-bottom: 1px solid #0A6CCE; border-left: 1px solid #0A6CCE; } .cardSelected { BORDER-left: 1px solid #0A6CCE; BORDER-RIGHT: 1px solid #0A6CCE; BORDER-TOP: 1px solid #0A6CCE; FONT-WEIGHT: normal; CURSOR: hand; COLOR: #000000; font-size:12px; BACKGROUND-COLOR: #E1EFFD; } .boardMain { BORDER-RIGHT: 1px solid #dbe9fd; BORDER-LEFT: 1px solid #dbe9fd; COLOR: #F1AB65; LINE-HEIGHT:200%; BORDER-BOTTOM:1px solid #0A6CCE; BORDER-left: 1px solid #0A6CCE; BORDER-RIGHT: 1px solid #0A6CCE; BACKGROUND-COLOR:#E1EFFD; } .cardSpace { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } .cardSpaceLeft { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } .cardSpaceLast { BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF } A.nav1:link {COLOR: #000000; TEXT-DECORATION: none} A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none} A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none} .erect{ COLOR: #ffffff; WRITING-MODE: tb-rl; TEXT-ALIGN:left; letter-spacing:2px; } A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none} A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none} A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none} A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none} </style> </head> <body bgcolor="#FFFFFF"> <table width="230" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <!-- 菜单定义开始 --> <script language=javascript> function secCard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="cardNormal"; secTable.cells[n].className="cardSelected"; for(i=1;i<secTable.cells.length;i=i+2) secTable.cells[i].className="cardSpace"; secTable.cells[n+1].className="cardSpaceLeft"; secTable.cells[3].className="cardSpaceLast"; } function secBoard(n) { for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display=""; } </script> <td width="25" rowspan="2" align="center" bgcolor="#0A6CCE" ><span class="erect"> 中国</span></TD> <td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable> <TBODY> <TR> <TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);" style="padding:0 0 0 0">menu1</TD> <TD width="2" height="20" class="cardSpace"> </TD> <TD align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">menu2</TD> <TD width="2" height="20" class="cardSpace"> </TD> </TR> </TBODY> </TABLE></TD> </TR> <tr> <td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable"> <TBODY style="DISPLAY: block"> <TR> <TD align="left" vAlign="middle"><table width="100%" height="75" border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td>abcde</td> </tr> </table></TD> </TR> </TBODY> <TBODY style="DISPLAY: none"> <TR> <TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="69"><div align="center"></div> abcde</td> </tr> </table></TD> </TR> </TBODY> </TABLE></TD> </TR> </TABLE> </body></html>
 提示：您可以先修改部分代码再运行

<style type="text/css"> <!-- * { margin: 0; padding:0 } body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background: #D6D3CE; font-size: 14px; font-weight:bold; color: #000000; } #top{ width:739px; height:65px; background: #D6D3CE url(top.gif) no-repeat; } #bottom { width:739px; height:45px; background: #D6D3CE url(bottom.gif) no-repeat 615px 0px; font-size:12px; font-weight:normal; text-align:left; padding:22px 0 0 22px; } #container { text-align: left; width: 717px; margin: 0 11px; background: #D6D3CE; } #conleft{ float:left; width:134px; height:296px; border: 1px #7B9EBC solid; background:#FFF; text-align:center; padding-top:10px; } #conright{ float:right; width:550px; height:306px; border: 1px #7B9EBC solid; background:#FFF; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background: #D6D3CE; height: 28px; } #container #content ul {margin: 10px;} #container #content li {margin: 5px; } #container #content li img {margin: 5px;display:block;} #container #content { height: 300px; padding: 10px; } .content1 { border: 1px #94999C solid ; background: #EFE6E7; } .content2 { border: 1px #94999C solid ; background: #EFE6E7; } .content3 { border: 1px #94999C solid ; background: #EFE6E7; } .hidecontent {display:none;} /*-----------Tags-----------*/ #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(tagleft.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(tagright.gif) no-repeat right -29px; padding: 0 25px 0 25px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(tagright.gif) no-repeat right -87px; padding: 0 25px 0 25px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(tagright.gif) no-repeat right 0px; padding: 0 25px 0 25px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(tagright.gif) no-repeat right -58px; padding: 0 25px 0 25px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(tagright.gif) no-repeat right -87px; padding: 0 25px 0 25px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(tagright.gif) no-repeat right 0px; padding: 0 25px 0 25px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(tagleft.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(tagright.gif) no-repeat right -58px; padding: 0 25px 0 25px