这是要实现的效果图：
一.HTML页面布局
<!-- HTML页面布局 --> <ul> <li>房产</li> <li>家居</li> <li>二手房</li> </ul> <div> <div> 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房</div> <div>40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计</div> <div> 通州豪华3居260万 二环稀缺2居250w甩 西3环通透2居290万 130万2居限量抢购 黄城根小学学区仅260万 121平70万抛! 独家别墅280万 苏州桥2居优惠价248万</div> </div>
二.CSS样式制作
/* CSS样式制作 */ *{ font-size:14px; font-weight:bold; } .tab_menu{ list-style:none; margin-left:-35px; } li{ float:left; /*遮不住底部边的位置，怎么解决？*/ border:1px solid grey; border-bottom:none; margin-bottom:-3px; margin-right:3px; width:70px; text-align:center; padding:7px 0; } li:hover{ cursor:pointer; } .tab_box{ clear:both; width:250px; border:1px solid blue; border-top:2px solid red; } .selected{ background-color:white; border-top:2px solid red; } .tab_box{ padding:10px 80px 0 10px; height:170px; } .tab_box div{ height:150px; line-height:30px; } .hide{ display:none; }
三.JS实现选项卡切换
var ul=document.getElementsByClassName("tab_menu"), liArr=ul[0].getElementsByTagName("li"), div=document.getElementsByClassName("tab_box"), divArr=div[0].getElementsByTagName("div"); function sibling(element){ var a=[]; var p=element.parentNode.children; for(var i=0;i<p.length;i++){ if(p[i]!==element) a.push(p[i]); } return a; } for(var i=0;i<liArr.length;i++){ liArr[i].index=i; liArr[i].onclick=function(){ this.className="selected"; var otherLiArr=sibling(this); for(var j=0;j<otherLiArr.length;j++){ otherLiArr[j].className=""; } for (var z = 0; z < divArr.length; z++) { divArr[z].className="hide"; } divArr[this.index].className=""; } }