DOM中實現tab欄的轉場效果

不太美觀，但是想把這段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>