最近做了一個開發感想的網站，想把一些編程中的想法寫下來。做網站過程中想做個TAB導航，正好記在這里。也歡迎大家多多訪問我的網站。

在網頁中應用選項卡可以使網頁顯得更緊湊，結合Ajax技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹幾種簡潔的選項卡效果的實現（不涉及滑動門和AJAX），附有實例，無圖片，兼容性較好，方便大家直接使用。第一種形式: 通過更換顯示樣式實現，這種很常見，就不多說了。

1. <divid="tabs0">
2. <ulclass="menu0"id="menu0">
3. <lionclick="setTab(0,0)"class="hover">新聞</li>
4. <lionclick="setTab(0,1)">評論</li>
5. <lionclick="setTab(0,2)">技術</li>
6. <lionclick="setTab(0,3)">點評</li>
7. </ul>
8. <divclass="main"id="main0">
9. <ulclass="block"><li>新聞列表</li></ul>
10. <ul><li>評論列表</li></ul>
11. <ul><li>技術列表</li></ul>
12. <ul><li>點評列表</li></ul>
13. </div>
14. </div>

第二種形式: 這種結構比較復雜一些，外面加一個相對層(.menu1box)，設置溢出隱藏，將選項卡(#menu1)設為絕對定位，設置層指針為1(z-index:1;)，以便可以遮住下主區塊(.main1box)1px的高度。設置主區塊的邊框為1px的黑邊，上空白(margin-top)為-1px，使上邊框伸到選項卡下。當改變選項卡某項(li)的背景為白色時便可遮住一部分主區塊的上邊框。這樣效果就實現了。

1. <divid="tabs1">
2. <divclass="menu1box">
3. <ulid="menu1">
4. <liclass="hover"onmouSEOver="setTab(1,0)"><ahref="#">新聞</a></li>
5. <lionmouseover="setTab(1,1)"><ahref="#">評論</a></li>
6. <lionmouseover="setTab(1,2)"><ahref="#">技術</a></li>
7. <lionmouseover="setTab(1,3)"><ahref="#">點評</a></li>
8. </ul>
9. </div>
10. <divclass="main1box">
11. <divclass="main"id="main1">
12. <ulclass="block"><li>新聞列表</li></ul>
13. <ul><li>評論列表</li></ul>
14. <ul><li>技術列表</li></ul>
15. <ul><li>點評列表</li></ul>
16. </div>
17. </div>
18. </div>

第一、二種形式的JS代碼:

1. functionsetTab(m,n){
2. vartli=document.getElementById("menu"+m).getElementsByTagName("li");/*獲取選項卡的LI對象*/
3. varmli=document.getElementById("main"+m).getElementsByTagName("ul");/*獲取主顯示區域對象*/
4. for(i=0;i<tli.length;i++){
5. tli[i].className=i==n?"hover":"";/*更改選項卡的LI對象的樣式，如果是選定的項則使用.hover樣式*/
6. mli[i].style.display=i==n?"block":"none";/*確定主區域顯示哪一個對象*/
7. }
8. }

第三種形式: 這也是一種不常用的方式，加一個相對層(.menu2box)，利用一個背景層(#tip2)定位，通過改變層的左距離(left)實現效果。

1. <divid="tabs2">
2. <divclass="menu2box">
3. <divid="tip2"></div>
4. <ulid="menu2">
5. <liclass="hover"onmouseover="nowtab(2,0)"><ahref="#">新聞</a></li>
6. <lionmouseover="nowtab(2,1)"><ahref="#">評論</a></li>
7. <lionmouseover="nowtab(2,2)"><ahref="#">技術</a></li>
8. <lionmouseover="nowtab(2,3)"><ahref="#">點評</a></li>
9. </ul>
10. </div>
11. <divclass="main"id="main2">
12. 新聞內容
13. </div>
14. </div>