本文實(shí)例講述了JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁(yè)功能。分享給大家供大家參考，具體如下：
標(biāo)簽頁(yè)是一個(gè)很常見(jiàn)的東西，在一些框架中也就很常見(jiàn)的，
但未必所有人都知道怎么寫，很多人知道怎么在網(wǎng)上復(fù)制一份是真的，
這樣不好，往往需要用大量的時(shí)間去修改網(wǎng)上復(fù)制下來(lái)的東西，還不如自己寫一份快。
一、基本目標(biāo)
創(chuàng)建一個(gè)如下的標(biāo)簽頁(yè)，在IE8中與谷歌瀏覽器中的效果如下，幾乎沒(méi)有區(qū)別
谷歌瀏覽器：
IE8：
二、制作過(guò)程
1、首先布置好場(chǎng)景，在一個(gè)圖層內(nèi)：
圖層1~圖層4四個(gè)超級(jí)鏈接是一個(gè)圖層，然后各自的圖層的內(nèi)容分別是各自的圖層，默認(rèn)是圖層1的內(nèi)容顯示，而圖層2~4則默認(rèn)不顯示
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/></head><body><div style="border:1px solid #000000;float:left;wight:10%;"><div><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層1</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層2</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層3</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="div_tab(this)">圖層4</a></div><div id="tabdiv1" style="display:block;">aaaaaaaaaaaaaaaaaaa</div><div id="tabdiv2" style="display:none;">bbbbbbbbbbbbbbbbb</div><div id="tabdiv3" style="display:none;">cccccccccccccccc</div><div id="tabdiv4" style="display:none;">dddddddddddddd</div></div><div style="clear:both"></div></body></html>
2、然后是每一個(gè)超級(jí)鏈接都傳遞自身到Javascript腳本處理，注意的是，如果對(duì)超級(jí)鏈接添加Javascript腳本，必須在寫上href，并且這個(gè)鏈接指向javascript:void(0)，隨后，再加上onclick屬性。之后，得到整個(gè)超級(jí)鏈接的Javascript根據(jù)超級(jí)鏈接的文本進(jìn)行判斷，如果是圖層1，則顯示圖層1，隱藏其它的所有圖層，以此類推。注意的是，a是沒(méi)有value屬性的，所以這里根據(jù)其內(nèi)文本進(jìn)行判斷。
<script>function div_tab(obj){ switch(obj.innerHTML){ case "圖層1": document.getElementById("tabdiv1").style.display="block"; document.getElementById("tabdiv2").style.display="none"; document.getElementById("tabdiv3").style.display="none"; document.getElementById("tabdiv4").style.display="none"; break; case "圖層2": document.getElementById("tabdiv1").style.display="none"; document.getElementById("tabdiv2").style.display="block"; document.getElementById("tabdiv3").style.display="none"; document.getElementById("tabdiv4").style.display="none"; break; case "圖層3": document.getElementById("tabdiv1").style.display="none"; document.getElementById("tabdiv2").style.display="none"; document.getElementById("tabdiv3").style.display="block"; document.getElementById("tabdiv4").style.display="none"; break; case "圖層4": document.getElementById("tabdiv1").style.display="none"; document.getElementById("tabdiv2").style.display="none"; document.getElementById("tabdiv3").style.display="none"; document.getElementById("tabdiv4").style.display="block"; break; }}</script>更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript頁(yè)面元素操作技巧總結(jié)》、《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
