<style>

.box{width: 500px;height: 300px;background: #CCC;border:1px solid red;display: none;margin-top: 10px;}

button{background: #FFF;color: #000;margin-top: 20px;width: 100px;height: 50px;text-align: center;line-height: 50px;}

.active{background: yellow;color: red;}

</style>

<button class="active">11</button>

<button>22</button>

<button>33</button>

<div class="box" style="display:block;">11111111111111111111</div>

<div class="box">22222222222</div>

<div class="box">33333333333333333333</div>

<script>

window.onload=function(){

var aBtn=document.getElementsByTagName('button');   //获取所有的按钮

var aBox=document.getElementsByTagName('div');      //获取所有的div

for (var i = 0; i < aBtn.length; i++) {             //for循环

aBtn[i].index=i;                                //获取按钮的索引值

aBtn[i].onclick=function(){                     //点击按钮执行以下语句

for (var i = 0; i < aBtn.length; i++) {     //for循环

aBtn[i].className='';                   //先将所有的按钮取消active的类名

aBox[i].style.display="none";           //将所有大的div都隐藏

};

this.className='active';                    //让被点击的按钮获得active的类名

aBox[this.index].style.display="block";     //让被点击按钮索引值对应的div显示

} 

};

}

</script>