編程挑戰
現在利用之前我們學過的JavaScript知識，實現選項卡切換的效果。
效果圖:
文字素材:
房產：
275萬購昌平鄰鐵三居 總價20萬買一居
200萬內購五環三居 140萬安家東三環
北京首現零首付樓盤 53萬購東5環50平
京樓盤直降5000 中信府 公園樓王現房
家居:
40平出租屋大改造 美少女的混搭小窩
經典清新簡歐愛家 90平老房煥發新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆 衛生間煙道的設計
二手房：
通州豪華3居260萬 二環稀缺2居250w甩
西3環通透2居290萬 130萬2居限量搶購
黃城根小學學區僅260萬 121平70萬拋!
獨家別墅280萬 蘇州橋2居優惠價248萬
分析
大家先思考和分析實現思路，然后在動手實現
一、HTML頁面布局
提示: 選項卡標題使用ul..li 選項卡內容使用div
二、CSS樣式制作
提示: 整個選項卡的樣式設置 選項卡標題的樣式設置 選項卡內容的樣式設置 一開始只顯示一個選項卡內容，其它選項卡內容隱藏。
三、JS實現選項卡切換
提示: 獲取選項卡標題和選項卡內容 選項卡內容多個，需要循環遍歷來操作，得知哪個選項卡和哪個選項內容匹配 通過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。
代碼實現：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>實踐題 - 選項卡</title> 6 <style type="text/css"> 7 *{padding:0px;margin: 0px;font:12px normal "microsoft yahei";} 8 #tabs {width:290px;padding:5px;height:150px;margin:20px;} 9 #tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;} 10 #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;} 11 #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;} 12 #tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;} 13 .hide{display: none;} 14 </style> 15 <script type="text/javascript"> 16 window.onload = function(){ 17 var oTab = document.getElementById("tabs"); 18 var oUl = oTab.getElementsByTagName("ul")[0]; 19 var oLis = oUl.getElementsByTagName("li"); 20 var oDivs= oTab.getElementsByTagName("div"); 21 22 for(var i= 0,len = oLis.length;i<len;i++){ 23 oLis[i].index = i; 24 oLis[i].onclick = function() { 25 for(var n= 0;n<len;n++){ 26 oLis[n].className = ""; 27 oDivs[n].className = "hide"; 28 } 29 this.className = "on"; 30 oDivs[this.index].className = ""; 31 } 32 }; 33 } 34 </script> 35 36 </head> 37 <body> 38 <div id="tabs"> 39 <ul> 40 <li class="on">房產</li> 41 <li>家居</li> 42 <li>二手房</li> 43 </ul> 44 <div> 45 275萬購昌平鄰鐵三居 總價20萬買一居<br> 46 200萬內購五環三居 140萬安家東三環<br> 47 北京首現零首付樓盤 53萬購東5環50平<br> 48 京樓盤直降5000 中信府 公園樓王現房<br> 49 </div> 50 <div class="hide"> 51 40平出租屋大改造 美少女的混搭小窩<br> 52 經典清新簡歐愛家 90平老房煥發新生<br> 53 新中式的酷色溫情 66平撞色活潑家居<br> 54 瓷磚就像選好老婆 衛生間煙道的設計<br> 55 56 </div> 57 <div class="hide"> 58 通州豪華3居260萬 二環稀缺2居250w甩<br> 59 西3環通透2居290萬 130萬2居限量搶購<br> 60 黃城根小學學區僅260萬 121平70萬拋!<br> 61 獨家別墅280萬 蘇州橋2居優惠價248萬<br> 62 63 </div> 64 </div> 65 66 </body> 67 </html>