1、在網頁制作過程中，我們經常會用到選項卡切換效果，它能夠讓我們的網頁在交互和布局上都能得到提升
原理：在布局好選項卡的HTML結構后，我們可以看的出來，選項卡實際上是三個選項卡標頭和三個對應的版塊，如下圖，是三個標頭分別是教育，娛樂，汽車，當我們單擊教育時，教育那個選項卡標頭的背景會變成激活狀白色，下面的的三個DIV形成的版塊只會顯示第一個教育的內容。當我們單擊娛樂時，娛樂那個選項卡標頭的背景會變成激活狀白色，下面的的三個DIV形成的版塊只會顯示第二個娛樂的內容。當我們單擊汽車時，汽車那個選項卡標頭的背景會變成激活狀白色，下面的的三個DIV形成的版塊只會顯示第三個汽車的內容。
3、 具體的實現是通過getElementsByTagName方法，先對選項卡三個標頭H3進行捕獲，產生一個數組，我們利用for循環分別對每個標頭選項H3添加一個index屬性作為它的序號同時注冊單擊事件，當某個H3被單擊時，我們先把所有的H3都變成原始狀態，沒active類，然后再把被單擊的H3要添加一個active類使其變成白色，此時，我們還要知道被單擊H3的序號，這樣我們可以去，設定與之序號相同的DIV顯示出來，而其它的DIV剛隱藏起來。
<!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"> #tab{width:300px;border:3px solid #CCC;} #tab .active{background-color:#FFF} #tab h3{ margin:0px; padding:0px; font-size:14px; float:left; background-color:#CCC; width:60px; height:24px; line-height:24px; text-align:center; } #tab div{ clear:both; height:100px; font-size:14px; padding:20px 0px 0px 20px; display:none; } </style> <script> window.onload=function(){ var oTab=document.getElementById("tab"); var aH3=oTab.getElementsByTagName("h3"); var aDiv=oTab.getElementsByTagName("div"); for(var i=0;i<aH3.length;i++){ aH3[i].index=i; aH3[i].onclick=function(){ for(var i=0;i<aH3.length;i++){ aH3[i].className=""; aDiv[i].style.display="none"; } this.className="active"; aDiv[this.index].style.display="block"; } } } </script> </head> <body> <div id="tab"> <h3 class="active">教育</h3> <h3>娛樂</h3> <h3>汽車</h3> <div style="display:block">教育的內容</div> <div>娛樂的內容</div> <div>汽車的內容</div> </body> </html>