选项卡

每一个 按钮(input)对应 一份内容

简单的选项卡

CSS：

#box p,#box2 p,#box3 p{
  width: 200px;
  height: 200px;
  background: yellow;
  line-height: 200px;
  text-align: center;
  font-size: 50px;
  display: none;
}
   
.on{
  background: red;
}

Javascript：

function tab(name,sEv){
var oBox=document.getElementById(name);
var aBtn=oBox.getElementsByTagName('input');
var aDiv=oBox.getElementsByTagName('p')
}
for(var i=0;i<aBtn.length;i++){
                aBtn[i].index=i;
                aBtn[i][sEv]=function(){
                for(var i=0;i<aBtn.length;i++){
                aBtn[i].className='';
                aDiv[i].style.display='none';
                }
this.className='on';
aDiv[this.index].style.display='block';
  }
                   }
         }
     window.onload=function(){
tab('box','onclick');
tab('box2','onmouseover');
tab('box3','onmouseout');
}

HTML：

<p id="box">
  <input type="button" value="啊啊" class="on">
  <input type="button" value="得到">
  <input type="button" value="回家">
  <p style="display: block;">1</p>
  <p>2</p>
  <p>3</p>
 </p>
<p id="box2">
  <input type="button" value="啊啊" class="on">
  <input type="button" value="得到">
  <input type="button" value="回家">
  <p style="display: block;">1</p>
  <p>2</p>
  <p>3</p>
</p>
<p id="box3">
  <input type="button" value="啊啊" class="on">
  <input type="button" value="得到">
  <input type="button" value="回家">
  <p style="display: block;">1</p>
  <p>2</p>
  <p>3</p>
 </p>