https://www.cnblogs.com/chiangchou/p/js-oop2.html
<!DOCTYPE html>
<html>
<head>
<style>
#tabBox input {
background: #F6F3F3;
border: 1px solid #FF0000;
}
#tabBox .active {
background: #E9D4D4;
}
#tabBox div {
300px;
height: 250px;
display: none;
padding: 10px;
background: #E9D4D4;
border: 1px solid #FF0000;
}
</style>
<meta charset="utf-8" />
<script>
window.onload = function(){
new Tab('tabBox');
}
function Tab(id){
var tabBox = document.getElementById(id);
this.btn = tabBox.getElementsByTagName("input");
this.div = tabBox.getElementsByTagName("div");
var _this = this ;
for(var i=0;i< this.btn.length;i++){
this.btn[i].index = i;
this.btn[i].onclick = function(){
_this.clickBtn(this);
}
}
}
Tab.prototype.clickBtn = function(btn){
for(var j=0;j<this.btn.length;j++){
this.div[j].style.display = 'none';
}
this.div[btn.index].style.display = 'block';
}
</script>
</head>
<body>
<div id="tabBox">
<input type="button" value="游戏" class="active" />
<input type="button" value="旅行" />
<input type="button" value="音乐" />
<div style="display:block;">GTA5、孤岛惊魂</div>
<div>澳大利亚、西藏</div>
<div>暗里着迷、一生有你</div>
</div>
</body>
</html>