用jQuery实现选项卡，比原生JS更加简便，但是原理还是一样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
400px;
height: 300px;
margin: 100px auto;
}
#wrap div {
400px;
height: 300px;
border: #333 2px solid;
line-height: 300px;
text-align: center;
font-size: 50px;
display: none;
}
#wrap .active {
background: red;
color: #fff;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function(){
var aBtn = $('input');
var aDiv = $('#wrap div');
aBtn.click(function(){
aBtn.removeClass('active');
aDiv.hide();
$(this).addClass('active');
aDiv.eq($(this).index()).show();
});
});
</script>
</head>
<body>
<div id="wrap">
<input type="button" value="按钮1" class="active">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<div style="display: block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>