參考：http://blog.sina.com.cn/s/blog_6cccb1630100m23i.html
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> <title>Tab頁切換</title> <script src="javascript/JScript.js" type="text/javascript"></script> <link href="css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <table class="tabTitlesContainer"> <tr id="tabTitles"> <td class="tabTitleSelected" onclick="tabPageControl(0)">DIV</td> <td class="tabTitleUnSelected" onclick="tabPageControl(1)">CSS</td> <td class="tabTitleUnSelected" onclick="tabPageControl(2)">JavaScript</td> </tr> </table> <table id="tabPagesContainer"> <tbody class="tabPageSelected"> <tr class="tabPage"> <td>HTML的DIV控件是其他控件的容器。當要以編程方式生成控件、隱藏/顯示一組控件或本地化一組控件時，該控件尤其有用。</td> </tr> </tbody> <tbody class="tabPageUnSelected"> <tr class="tabPage"> <td>級聯樣式表 (CSS) 包含應用於網頁中的元素的樣式規則。這些樣式定義元素的顯示方式以及元素在頁面中的放置位置</a></td> </tr> </tbody> <tbody class="tabPageUnSelected"> <tr class="tabPage"> <td>Javascript是一種由Netscape的LiveScript發展而來的原型化繼承的面向對象的動態類型的區分大小寫的客戶端腳本語言，主要目的是為了解決服務器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。</td> </tr> </tbody> </table> </body> </html>
簡單的JavaScript代碼如下：
function tabPageControl(n) { for (var i = 0; i < tabTitles.cells.length; i++) { tabTitles.cells[i].className = "tabTitleUnSelected"; } tabTitles.cells[n].className = "tabTitleSelected"; for (var i = 0; i < tabPagesContainer.tBodies.length; i++) { tabPagesContainer.tBodies[i].className = "tabPageUnSelected"; } tabPagesContainer.tBodies[n].className = "tabPageSelected"; }
簡單的CSS代碼如下：
body{text-align:center;} .tabTitlesContainer{text-align:center;font-size:small;cursor:hand;width:300px;border-width:thin;} .tabTitleUnSelected{background-color:Silver;width:100px;} .tabTitleUnSelected:hover{background-color:Orange;} .tabTitleSelected{background-color:Gray;width:100px;} #tabPagesContainer{text-align:left;font-size:small;font-size:small;width:300px;} .tabPageUnSelected{background-color:Orange;display: none;} .tabPageSelected{background-color: Orange;display:block;} .tabPage{height:80px;}