JavaScript实现选项卡（三种方法）

本文实例讲述了js选项卡的实现方法。

一、html代码：

选项1

选项2

选项3

二、css样式：

div1 div{

width:200px;
height:200px;
border:1px #000 solid;
display:none;
}
.active{
background:red;
}

三、js代码：

方法一:

for(var i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick = function(){
for(var i=0;i<aInput.length;i++){
aInput[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
}

方法二（采用立即执行函数）：

for(var i=0;i<aInput.length;i++){
(function(i){
aInput[i].onclick = function(){
for( var j=0;j<aDiv.length;j++){
aInput[j].className = " ";
aDiv[j].style.display = "none";
}
aInput[i].className = "active ";
aDiv[i].style.display = "block";
};
})(i);
};

方法三（for循环+if判断当前点击与自定义数组是否匹配）:

for(var i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
for( var j=0;j<aDiv.length;j++){
aInput[j].className = " ";
aDiv[j].style.display = "none";
this.className = "active ";
// 判断当前点击是按钮数组中的哪一个
if(this == aInput[j]) {
aDiv[j].style.display = "block";
}
};
};
};