JS面向对象实现选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 input {
background: white;
}
#div1 input.active {
background: yellow;
}
#div1 div {
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
<script>
window.onload = function() {
//创建一个选项卡对象,在某一个div中
new Tabswitch('div1');
}
function Tabswitch(id) {
var _this = this;
var oDiv = document.getElementById(id);
//定义选项卡的两个属性,分别为上面的选择器和下面的显示内容
this.aBtn = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');
//循环初始化选项卡的各个选择按钮
//初始化两个地方,1是选项卡的index属性,另一个为选项卡的方法
for(var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onclick = function() {
_this.fnClick(this);
};
}
}
//统一定义点击选项卡之后的方法
Tabswitch.prototype.fnClick = function(oBtn) {
// 将所有的选项卡状态还原
for(var i = 0; i < this.aBtn.length; i++) {
this.aBtn[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 class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display: block;">aaa</div>
<div>afdafje</div>
<div>afjeiofje</div>
</div>
</body>
</html>
JS面向过程实现选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1 input{
background: white;
}
#div1 input.active{
background: yellow;
}
#div1 div{
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i = 0;i<aBtn.length;i++)
{
aBtn[i].index = i;
aBtn[i].onclick = function(){
for (var i=0;i<aBtn.length;i++) {
aBtn[i].className= '';
aDiv[i].style.display = 'none';
}
this.classname = 'active';
aDiv[this.index].style.display='block';
};
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display: block;">aaa</div>
<div>afdafje</div>
<div>afjeiofje</div>
</div>
</body>
</html>
