案例1;面向过程选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {background: white;display: block;}
#div1 input {background: gray;}
#div1 input.checked {background: red;}
div {height: 200px;width: 200px;background: green;display: none;}
</style>
<script>
window.onclick = function(){
var oDiv1 = document.getElementById("div1");
var aBtn = oDiv1.getElementsByTagName("input");
var aDiv = document.getElementsByTagName("div"); //oDiv1 == aDiv[1]
for(var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
for(var j = 0; j < aBtn.length; j++){
aBtn[j].className = "";
aDiv[j+1].style.display = 'none';
}
this.className = 'checked';
aDiv[this.index+1].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id = "div1">
<input type = "button" value = 'aaa' class="checked"/>
<input type = "button" value = 'bbb'/>
<input type = "button" value = 'ccc'/>
</div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</body>
</html>
案例2:面向对象选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {background: white;display: block;}
#div1 input {background: gray;}
#div1 input.checked {background: red;}
div {height: 200px;width: 200px;background: green;display: none;}
</style>
<script>
//onload的作用,相当于加载、初始化
window.onload = function(){
new TabSwitch('div1');
}
function TabSwitch(id){ //构造函数
this.oDiv1 = document.getElementById(id); //this是指当前所创建的那个对象
this.aBtn = document.getElementsByTagName("input");
this.aDiv = document.getElementsByTagName("div"); //oDiv1 == aDiv[1]
var _this = this; //保存this对象
for(var i = 0; i < this.aBtn.length; i++){
this.aBtn[i].index = i;
this.aBtn[i].onclick = function(){
_this.fnClick(this); //这里this表示aBtn
}
}
}
TabSwitch.prototype.fnClick = function(oBtn){
for(var j = 0; j < this.aBtn.length; j++){
this.aBtn[j].className = "";
this.aDiv[j+1].style.display = 'none';
}
oBtn.className = 'checked';
this.aDiv[oBtn.index+1].style.display = 'block';
}
</script>
</head>
<body>
<div id = "div1">
<input type = "button" value = 'aaa' class="checked"/>
<input type = "button" value = 'bbb'/>
<input type = "button" value = 'ccc'/>
</div>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</body>
</html>