1，这个例子是使用innerHTML来做选项卡，内容多了，写就麻烦了
|
<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> </BODY> </HTML> |
2，记得
Juven
老哥提供了一个JavaScript写的的TabPane组件，
感兴趣的这里下载
效果图如下：
3，很多情况见到的是采用Table+CSS来实现的了。
|
<style type=text/css>
td { font-size: 12px; color: #000000; line-height: 150%; } .sec1 { background-color: #EEEEEE; 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) { 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> <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% onclick="secBoard(0)">关于TBODY标记</td> <td class=sec1 width=10% onclick="secBoard(1)">关于cells集合</td> <td class=sec1 width=10% onclick="secBoard(2)">关于tBodies集合</td> <td class=sec1 width=10% onclick="secBoard(3)">关于display属性</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align=center valign=top> <br> <br> 这里填加内容，略去。1 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> <br> <br> 这里填加内容，略去。2 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> <br> <br> 这里填加内容，略去。3 </td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> <br> <br> 这里填加内容，略去。4 </td> </tr> </tbody> </table> |
http://www.w3cn.org/article/translate/2005/112.html
