<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡面向对象写法</title>
<style>
#div1 .active{background: yellow;}
#div1 div{height: 200px; width: 200px; background: #ccc; display: none;}
</style>
<script>
//混合模式
window.οnlοad=function()
{
new TabSwitch('div1');
};
function TabSwitch(id)//构造函数
{
var _this=this;
var oDiv1=document.getElementById(id);
this.aIut=oDiv1.getElementsByTagName('input');
this.aDiv=oDiv1.getElementsByTagName('div');
for(var i=0;i<this.aIut.length;i++)
{
this.aIut[i].index=i; //index属性可返回下拉列表中选项的索引位置
this.aIut[i].οnclick=function()
{
_this.fnClick(this);
};
}
};
TabSwitch.prototype.fnClick=function(oBtn)//原型
{
for(var i=0;i<this.aIut.length;i++)
{
this.aIut[i].className='';
this.aDiv[i].style.display='none';
}
oBtn.className='active';
this.aDiv[oBtn.index].style.display='block';
};
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" class="active"/>
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display: block">周杰伦</div>
<div>张学友</div>
<div>薛之谦</div>
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-32404.html
