GeT_WrOnG
2017-01-04 15:59
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> *{margin:0; padding:0;} #all{font-family:SimHei; width:350px;} ul li{ list-style:none; } #conTrol li{ float:left; width:80px; height:29px; margin:0 4px; cursor:pointer; border:1px solid #ccc; border-bottom:none; text-align:center; line-height:26px; } p{margin-top:8px;} #container{ width:350px; height:150px; border:1px solid blue; border-top:none; float:left; } #conTrol .work{ position:relative; margin-bottom:-1px; border-top:1px solid red; height:30px; background:white; } .hide{display:none;} #conTrol{ height:30px; width:352px; margin-bottom:-1px; border-bottom:1px solid red; } </style> <script type="text/javascript"> window.onload = function(){ var conTrol = document.getElementById("conTrol"); var conTrol_li = conTrol.getElementsByTagName("li"); var container = document.getElementById("container"); var container_li = container.getElementsByTagName("div"); var len = conTrol.length; var i=0; for(i=0; i<len; i++){ conTrol_li[i].index = i; conTrol_li[i].onclick = function(){ for(i=0; i<len; i++){ container_li[i].className = 'hide'; conTrol_li[i].className = ''; } container_li[this.index].className = ''; conTrol_li[this.index].className = 'work'; } } } </script> </head> <body> <div id="all"> <ul id="conTrol"> <li>房产</li> <li>家居</li> <li>二手房</li> </ul> <div id="container"> <div> <p>275万购昌平邻铁三居 总价20万买一居</p> <p>200万内购五环三居 140万安家东三环</p> <p>北京首现零首付楼盘 53万购东5环50平</p> <p>京楼盘直降5000 中信府 公园楼王现房</p></div> <div><p>40平出租屋大改造 美少女的混搭小窝<p> <p>经典清新简欧爱家 90平老房焕发新生</p> <p>新中式的酷色温情 66平撞色活泼家居</p> <p>瓷砖就像选好老婆 卫生间烟道的设计</p></div> <div><p>通州豪华3居260万 二环稀缺2居250w甩<p> <p>西3环通透2居290万 130万2居限量抢购</p> <p>黄城根小学学区仅260万 121平70万抛!</p> <p>独家别墅280万 苏州桥2居优惠价248万</p></div> </div> </div> </body> </html>
第52行
var len = conTrol_li.length;
JavaScript进阶篇
468781 学习 · 22507 问题
相似问题