js实现选项卡切换的效果

效果图：

css 代码：

<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.demo{width: 500px;height: 600px;margin: auto;margin-top: 100px;}
.biaoti{width:400px;height: 60px;margin: auto;}
.list{float: left; width: 100px;height: 60px;text-align: center;cursor: pointer;margin-left: 20px;
line-height: 60px;border: 1px solid #ccc;border-bottom: 0}
/*.biaoti ul li{float: left; width: 100px;height: 60px;text-align: center;cursor: pointer;margin-left: 20px;
line-height: 60px;border: 1px solid #ccc;border-bottom: 0;}*/
.list-content{width: 400px;height: 400px;left:50px;border: 1px solid blue;border-top: 2px solid brown;margin: auto;margin-top: 2px;}
/* .biaoti ul li:first-child{border-top:2px solid brown;border-bottom: 2px solid #fff;}*/
.biaoti ul .active{border-top:2px solid brown;border-bottom:2px solid #fff;}
.content{display: none;text-align: center;padding-top: 20px;line-height: 30px;}
.list-content div:first-child{display: block;}

</style>

HTMl代码：

<div class="demo">
<div class="biaoti">
<ul>
<li class="list active">房产</li>
<li class="list">家居</li>
<li class="list">二手房</li>
</ul>
</div>

<div class="list-content">
<div class="content" id="1">
275万购昌平邻铁三居 总价20万买一居<br />
200万内购五环三居 140万安家东三环<br />
北京首现零首付楼盘 53万购东5环50平<br />
京楼盘直降5000 中信府 公园楼王现房<br />

</div>

<div class="content" id="2">
40平出租屋大改造 美少女的混搭小窝<br />
经典清新简欧爱家 90平老房焕发新生<br />
新中式的酷色温情 66平撞色活泼家居<br />
瓷砖就像选好老婆 卫生间烟道的设计<br />
</div>

<div class="content" id="3">
通州豪华3居260万 二环稀缺2居250w甩<br />
西3环通透2居290万 130万2居限量抢购<br />
黄城根小学学区仅260万 121平70万抛!<br />
独家别墅280万 苏州桥2居优惠价248万<br />

       </div>
    </div>
</div>

js代码：

未封装：

<!--<script type="text/javascript">
// var list=document.getElementsByTagName("li");
var list=document.getElementsByClassName("list")
for(var i=0;i<list.length;i++){
list[i].index=i;
list[i].onclick=function(){
//alert(this.index)
getcontent(this.index)
//alert(this.index+1)
var cs=this.parentNode.children;
console.log(cs);
for(var i=0;i<cs.length;i++){
var ci=cs[i];
if(this!=ci){
// console.log(ci)
// this.style.cssText="border-top:2px solid brown;border-bottom: 2px solid #fff;"
// ci.style.cssText="border-top: 1px solid #CCCCCC;border-bottom: 0;"
this.setAttribute("class","active list")
ci.setAttribute("class","list")
}
}
}
}
function getcontent(id){
var content=document.getElementsByClassName("content");
var itemId=content.item(id).getAttribute("id");
var par=content.item(id).parentNode.children;
//console.log(par);
for(var i=0;i<par.length;i++){
var ci=par[i];
if(content.item(id)!=ci){
content.item(id).style.display="block";
ci.style.display="none";
}
}
}           
</script>-->

封装后:

<!--<script type="text/javascript">

var list=document.getElementsByClassName("list")
for(var i=0;i<list.length;i++){
list[i].index=i;
list[i].onclick=function(){
getcontent(this.index)
}
}
function getcontent(id){
var content=document.getElementsByClassName("content");
var itemId=content.item(id).getAttribute("id");
var par=content.item(id).parentNode.children;
var cs=list.item(id).parentNode.children;
for(var i=0;i<par.length;i++){
var txt=content.item(id)
var ci=par[i];
if(txt!=ci){
txt.style.display="block";
ci.style.display="none";
}
}
for(var i=0;i<cs.length;i++){
var txt1=list.item(id);
var ci=cs[i];
if(txt1!=ci){
txt1.setAttribute("class","active list")
ci.setAttribute("class","list")
}
}
}
</script>-->

封装后:

<script type="text/javascript">

var list=document.getElementsByClassName("list")
for(var i=0;i<list.length;i++){
list[i].index=i;
list[i].onclick=function(){
getcontent(this.index)
}
}
function getcontent(id){
var content=document.getElementsByClassName("content");
var par=content.item(id).parentNode.children;
var cs=list.item(id).parentNode.children;
for(var i=0;i<par.length;i++){
var txt=content.item(id),txt1=list.item(id);
var ci=par[i],ci1=cs[i];
if(txt!=ci&&txt1!=ci){
// content
txt.style.display="block";
ci.style.display="none";
//list
txt1.setAttribute("class","active list")
ci1.setAttribute("class","list")
}
}
}
</script>

虽然简单，但是对初学者来说可以锻炼思维。希望对你们有帮助，谢谢！

有什么更好的方法，希望大牛给点意见！！！

总结：这不是一个很复杂的功能，但是只用js来写，对于js不熟悉的人来说，可能很费脑；闲话少说；在写这个功能的：思路如下：

1.首先就是html的结构和css样式，这是必不可少的。

2.就是js操作主要就是dom操作和循环遍历，在dom操作中最困难的问题就是this的兄弟元素。