选项卡切换

盒子部分

<div id="tab">
      <button class="active">标题一</button>
      <button>标题二</button>
      <button>标题三</button>
	</div>
	<div id="content">
      <p class="active">内容一</p>
      <p>内容二</p>
      <p>内容三</p>
	</div>

样式部分

<style>
      #tab button{
		padding: 5px;
	}
	#tab .active{
		background-color: blue;
		color: #fff;
	}
	#content{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}
	#content p{
		display: none;
	}
	#content .active{
		display: block;
	}

    </style>

js部分

<script>
	var btn=document.getElementById('tab').getElementsByTagName('button');
    var p=document.getElementById('content').getElementsByTagName('p');

	var len=btn.length;
    for(var i=0;i<len;i++){

       btn[i].index=i;
       
       btn[i].onclick=function(){

          for(var j=0;j<len;j++){
          	btn[j].className='';
          	p[j].className='';
          }

        btn[this.index].className='active';
        p[this.index].className='active';
       }
    }

</script>