<style type="text/css">
*{margin: 0;padding: 0;}
.firstDiv{width: 240px;height: 30px;border: 1px solid gainsboro;margin: 0 auto;margin-top: 100px;}
.firstDiv ul li{list-style: none;width: 80px;height: 30px;float: left;background: yellow;text-align: center;cursor: pointer;line-height: 30px;}
#active{color: red;background: yellowgreen;}
.DivTwo{width: 240px;height: 200px;margin: 0 auto;display: none;background: burlywood;}
</style>
<script type="text/javascript">
window.onload=function(){
var oLi=document.getElementsByClassName('lis')
var divs=document.getElementsByClassName('DivTwo');
for (var i=0;i<oLi.length;i++) {
oLi[i].index=i;
oLi[i].onclick=function(){
for (var i=0;i<oLi.length;i++) {
oLi[i].id='';
divs[i].style.display='none';
}
divs[this.index].style.display='block';
this.id='active';
}
}
}
</script>
<div class="firstDiv">
<ul>
<li class="lis" id="active">1</li>
<li class="lis">2</li>
<li class="lis">3</li>
</ul>
</div>
<div class="DivTwo" style="display: block;">111</div>
<div class="DivTwo">222</div>
<div class="DivTwo">333</div>
