核心提示：基于面向对象的选项卡!DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle* {margin: 0;padding: 0;}body {padd...
基于面向对象的选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 50px;
}
#box p {
width: 200px;
height: 200px;
border: 1px solid #000;
display: none;
}
#box input {
width: 50px;
height: 40px;
background: #d8d8d8;
}
#box input.active {
background: red;
}
</style>
</head>
<body>
<p id="box">
<input class="active" type="button" name="" id="" value="a" />
<input type="button" name="" id="" value="b" />
<input type="button" name="" id="" value="c" />
<p style="display: block;">1</p>
<p>2</p>
<p>3</p>
</p>
</body>
<script>
window.onload = function() {
var t1 = new Tab('box');
t1.int();
}
function Tab(id) {
var oBox = document.getElementById(id);
this.abtns = oBox.getElementsByTagName('input');
this.aDivs = oBox.getElementsByTagName('p');
this.int();
}
Tab.prototype.int = function() {
var _this = this;
for (var i = 0; i < this.abtns.length; i++) {
this.abtns[i].index = i;
this.abtns[i].onclick = function() {
_this.click(this);
}
}
}
Tab.prototype.click = function(obt) {
for (var i = 0; i < this.abtns.length; i++) {
this.abtns[i].className = '';
this.aDivs[i].style.display = 'none';
}
obt.className = 'active';
this.aDivs[obt.index].style.display = 'block';
}
</script>
</html>
