您的位置：首页 > Web前端 > JavaScript

js使用面向对象实现选项卡

2016-01-29 08:50 706 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
#div1{
height: 500px;
width: 500px;
margin:0 auto;
}
#div1 input{
background-color: #8a7dbe;
}
#div1 input.active{
background-color: #4CAE09;
}
#div1 div{
width: 300px;
height:200px;
display: none;
}
#div1 div.active1{
background-color: #2aabd2;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" value="aaa">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div class="active1" style="display: block">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
<script>
//使用面向对象思想实现选项卡
window.onload= function () {
new load('div1');
};
function load(id) {     //构造函数
var _this=this;       //this指当前的新建对象,div1
var oDiv = document.getElementById(id);
this.aBtn = document.getElementsByTagName('input');    //abtn变为当前属性
this.aDiv = oDiv.getElementsByTagName('div');
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onclick = function() {
_this.click(this);     //this指abtn[i]
}
}
}
load.prototype.click= function(oBtn) {     //用原型添加方法
for(var j=0;j<this.aBtn.length;j++){   //this指div1
this.aBtn[j].className='';
this.aDiv[j].style.display='none';
}
this.className='active';
this.aDiv[oBtn.index].style.display='block';
this.aDiv[oBtn.index].className='active1';
}

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航