这是要实现的效果图：
一.HTML页面布局
Box">
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
二.CSS样式制作
底部边的位置，怎么解决？*/
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实现选项卡切换
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="";
}
}
精彩专题分享：
原文链接：https://www.f2er.com/js/45616.html