總結了4種實現方法。
首先,寫出tab的框架,加上最簡單的樣式,程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < style > *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } </ style > </ head > < body > < div id = "tanContainer" > < div id = "tab" > < ul > < li >標題一</ li > < li >標題二</ li > < li >標題三</ li > < li >標題四</ li > </ ul > </ div > < div id = "tabCon" > < div >內容一</ div > < div >內容二</ div > < div >內容三</ div > < div >內容四</ div > </ div > </ div > </ body > </ html > |
現在的顯示效果如下圖:
四個tab標題和四個內容區都顯示在了頁面中,現在要實現tab切換效果,即點選標題一,內容一顯示出來,其他內容不顯示;點選標題二,內容二顯示出來,其他內容不顯示……
那麼,整體思路很簡單,給四個標題繫結事件,觸發的時候對應的內容顯示,其他的內容隱藏。
方法一:點選標題對應的內容顯示,非點選標題對應的內容隱藏。程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < style > *{ padding: 0; margin: 0; } li{ list-style: none; } </ style > < script > function tab(pid){ var tabs=["tab1","tab2","tab3","tab4"]; for(var i=0;i< 4 ;i++){ if(tabs[i]==pid){ document.getElementById(tabs[i]) .style.display = "block" ; }else{ document.getElementById(tabs[i]) .style.display = "none" ; } } } </script> </ head > < body > < div id = "tanContainer" > < div id = "tabNav" > < ul > < li onclick = "tab('tab1')" >標題一</ li > < li onclick = "tab('tab2')" >標題二</ li > < li onclick = "tab('tab3')" >標題三</ li > < li onclick = "tab('tab4')" >標題四</ li > </ ul > </ div > < div id = "tab" > < div id = "tab1" >內容一</ div > < div id = "tab2" >內容二</ div > < div id = "tab3" >內容三</ div > < div id = "tab4" >內容四</ div > </ div > </ div > </ body > </ html > |
方法二:先設定所有內容隱藏,然後點選標題對用的內容顯示。程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } #tabCon_1{ display: none; } #tabCon_2{ display: none; } #tabCon_3{ display: none; } </style> <script> function changeTab(tabCon_num){ for (i=0;i<=3;i++) { document.getElementById( "tabCon_" +i).style.display= "none" ; //將所有的層都隱藏 } document.getElementById( "tabCon_" +tabCon_num).style.display= "block" ; //顯示當前層 } </script> </head> <body> <div id= "tanContainer" > <div id= "tab" > <ul> <li onclick= "changeTab('0')" >標題一</li> <li onclick= "changeTab('1')" >標題二</li> <li onclick= "changeTab('2')" >標題三</li> <li onclick= "changeTab('3')" >標題四</li> </ul> </div> <div id= "tabCon" > <div id= "tabCon_0" >內容一</div> <div id= "tabCon_1" >內容二</div> <div id= "tabCon_2" >內容三</div> <div id= "tabCon_3" >內容四</div> </div> </div> </body> </html> |
方法三:顯示和隱藏通過是有擁有class控制,先把所有的內容隱藏dispaly設為none,而該class的display設定為block,遍歷所有標題節點和內容節點,點選標題後,該標題節點和對用的內容節點擁有class,其他的沒有。zhao123.top程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < style > *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon { clear: both; } #tabCon div { display:none; } #tabCon div.fdiv { display:block; } </ style > </ head > < body > < div id = "tanContainer" > < div id = "tab" > < ul > < li class = "fli" >標題一</ li > < li >標題二</ li > < li >標題三</ li > < li >標題四</ li > </ ul > </ div > < div id = "tabCon" > < div class = "fdiv" >內容一</ div > < div >內容二</ div > < div >內容三</ div > < div >內容四</ div > </ div > </ div > </ body > < script > var tabs=document.getElementById("tab").getElementsByTagName("li"); var divs=document.getElementById("tabCon").getElementsByTagName("div"); for(var i=0;i< tabs.length ;i++){ tabs[i] .onclick = function (){change(this);} } function change(obj){ for(var i = 0 ;i<tabs.length;i++){ if(tabs[i]==obj){ tabs[i] .className = "fli" ; divs[i] .className = "fdiv" ; }else{ tabs[i] .className = "" ; divs[i] .className = "" ; } } } </script> </ html > |
該方法的缺點是,內容塊的div下面不能再有div標籤了。
方法四:不用js,用“input:checked”來做tab切換,先把所有的內容隱藏,被選中的內容顯示。程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >input:checked實現tab切換</ title > < style > input{ opacity: 0;/*隱藏input的選擇框*/ } label{ cursor: pointer;/*滑鼠移上去變成手狀*/ float: left; } label:hover{ background: #eee; } input:checked+label{ color: red; } /*選擇前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/ .tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1), .tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){ opacity: 1; } .panel{ opacity: 0; position: absolute;/*使內容區域位置一樣*/ } </ style > </ head > < body > < div class = "tabs" > < input checked id = "one" name = "tabs" type = "radio" > < label for = "one" >標題一</ label > < input id = "two" name = "tabs" type = "radio" > < label for = "two" >標題二</ label > < div class = "panels" > < div class = "panel" > < p >內容一</ p > </ div > < div class = "panel" > < p >內容二</ p > </ div > </ div > </ div > </ body > </ html > |
該方法的缺點是,不同區域切換隻能通過點選。