直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px;}
#div1{width: 300px; height: 580px; background: greenyellow; border: 2px solid black;}
.inputs{ width: 25%;display: block; float: left; height: 30px;
cursor: pointer;}
#div1 div{display: none;}
.btn_active{ background: lightgoldenrodyellow; border: none;width: 25%;display: block; float: left; height: 30px; }
.btn_active:focus{outline: 0;}/*解决chrome下点击按钮出现一圈淡蓝色边框*/
.content{width: 100%; height: 580px; background: lightgoldenrodyellow;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for (var i=0;i<aBtn.length;i++) {
aBtn[i].index=i;
aBtn[i].onclick=function()
{
for(var j=0;j<aDiv.length;j++)
{
aBtn[j].className='inputs';
aDiv[j].style.display='none';
}
this.className='btn_active';
aDiv[this.index].style.display='block';
aDiv[this.index].className='content';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" name="" class="btn_active" value="trip" />
<input type="button" name="" class="inputs" value="news" />
<input type="button" name="" class="inputs" value="shop" />
<input type="button" name="" class="inputs" value="game" />
<div class="content" style="display: block;">
111
</div>
<div id="">
222
</div>
<div id="">
333
</div>
<div id="">
44
</div>
</div>
</body>
</html>
其中，第二层循环用以还原除当前选中按钮以外的样式，然后回到第一层设置当前按钮以及内容div的样式。这里i=j,随便设哪个的length都行。其他没什么好说的，写的比较简易，自己跑一下。