1.Object.prototype 类原型添加函数和对象添加函数区别
2.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1>div{
display: none; 100px;height: 100px;background-color: #999;
}
#div1>input.active{
background-color: yellow;
}
</style>
<script>
function TabGroup(aTab){
this.aTab = aTab||[];
}
TabGroup.prototype.ChangeTab = function(iIndex){
this.aTab[iIndex].active();
}
function Tab(oBtn,oDiv,oTabGroup){
this.oBtn = oBtn;
this.oDiv = oDiv;
this.oTabGroup = oTabGroup;
}
Tab.prototype.active = function(){
var oTabGroup = this.oTabGroup;
var aTab = oTabGroup.aTab;
for(var i=0;i<aTab.length;i++){
aTab[i].oBtn.className = '';
aTab[i].oDiv.style.display = 'none';
}
this.oBtn.className = 'active';
this.oDiv.style.display = 'block';
}
window.onload = function(){
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
var oTabGroup = new TabGroup();
for(var i=0;i<aBtn.length;i++){
let tab = new Tab(aBtn[i],aDiv[i],oTabGroup);
oTabGroup.aTab.push(tab);
aBtn[i].onclick = function(){
tab.active();
};
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="a" />
<input type="button" value="b" />
<input type="button" value="c" />
<div style="display: block">
a
</div>
<div>
b
</div>
<div>
c
</div>
</div>
</body>
</html>