js实现选项卡效果（利用闭包方式）

来源：互联网发布：inquire是什么软件编辑：程序博客网时间：2024/06/06 02:20

原理：

页面布局：3个按钮+3个div

点击某个按钮，使得某个div显示其余的2个div隐藏起来

<html>
<head>
<style>
input{background:white;}
div{width:550px;height:420px;display:none}
.active{background:yellow;}
</style>
<script>
window.onload=function(){
var bTn=document.getElementsByTagName("input");
var div=document.getElementsByTagName("div");
for(var i=0;i<bTn.length;i++){
var j=i;
(function(j){
bTn[j].onclick=function(){
for(var i=0;i<bTn.length;i++){ //清除所有的按钮和div格式
bTn[i].className="";
div[i].style.display="none";
}
this.className="active"; //使得当前点击的按钮(放生点击事件的按钮）改变颜色
div[j].style.display="block";//使得对应的div层显示出来
};
})(i);
}
};
</script>
</head>
<body>
<input type="button" value="1" class="active"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display:block;"><img src="sharapova2.jpg"/></div> 
<div><img src="sharapova3.jpg"/></div>
<div><img src="sharapova4.jpg"/></div>
</body>
</html>

效果图：