DOM中实现tab栏的切换效果

<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>