7、JavaScript总结——实现选项卡切换的效果
编程挑战
现在利用之前我们学过的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> 复制代码
