不太美观，但是想把这段js代码放上来，自己翻着玩。
<style type="text/css">
.box {
width: 240px;
border: 1px solid #000;
margin: 100px auto;
padding: 20px;
}
.con {
width: 100%;
height: 200px;
background-color: #cccccc;
border: 1px solid #000;
margin-top: 10px;
display: none;
}
.current {
background-color: #eec900;
}
<p class="box" id="box">
<button class="current">one</button>
<button>two</button>
<button>three</button>
<button>four</button>
<p class="con" style="display:block">one</p>
<p class="con">two</p>
<p class="con">three</p>
<p class="con">four</p>
<script>
var box=document.getelementbyid("box");
var btns=box.getelementsbytagname("button");
var ps=box.getelementsbytagname("p");
for(var i = 0 ; i<btns.length; i++){
btns[i].setattribute("index",i);
btns[i].onclick=function(){
for(var j =0 ; j<btns.length ; j++){
btns[j].removeattribute("class");
ps[j].style.display="none";
}
this.setattribute("class","current");
ps[this.getattribute("index")].style.display="block";
}
}
</script>
以上就是dom中实现tab栏的切换效果的详细内容。