E html><html><head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css">*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";/*background-Color:gray*/} /* CSS样式制作 */ #yangshi {width:290px;padding:5px;height:150px;margin:30px;/*background-Color:red */} #yangshi ul{list-style:none;height:30px;line-height:30px;display:block;border-bottom:2px saddlebrown solid}#yangshi ul li{background:#CCC;cursor:pointer;float:left;list-style:none; height:28px;line-height:28px;width:60px;margin:0px 3px;border:1px solid;border-bottom:none; display:inline-block;text-align:center;} #yangshi ul li.dianji{border-top:2px saddlebrown solid;border-bottom:2px solid #fff;} #yangshi div{height:200px;width:290px;height-line:20;border:2px solid yellow;border-top:none;background:blue;padding:5px;} .hide{display: none;} </style> <script type="text/javascript"> window.onload = function(){ var oTab = document.getElementById("yangshi");//获取id为“yangshi”的div元素 var oUl = oTab.getElementsByTagName("ul")[0];//获取id为“yangshi”的div元素中的ul元素 var oLis = oUl.getElementsByTagName("li");//获取id为“yangshi”的div元素中的ul元素中的li元素 var oDivs = oTab.getElementsByTagName("div"); //获取id为“yangshi”的div元素中的div元素 for(var i = 0,len = oLis.length;i<len ;i++){ //遍历li元素，获取它的index值，0，1，2，并一一对应赋值给XXX.xuhao元素，方便之后用这个index值来选取对应的div元素 oLis[i].xuhao = i;oLis[i].onclick = function(){ //点击li元素后执行的函数 ,只能写成onclick不能写onClickfor(var n = 0;n <len;n++ ){oLis[n].className = "";oDivs[n].className = "hide";}this.className = "dianji";oDivs[this.xuhao].className = "" }} } // JS实现选项卡切换 </script></head><body><div id = "yangshi"><ul><li class = "dianji">房产</li><!-- HTML页面布局 --><li>家居</li><li>二手房</li></ul><div >275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br></div><div class="hide"> 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家<br> 90平老房焕发新生 新中式的酷色温情<br> 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计<br><br></div> <div class="hide"> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br></div></div> </body></html>
