原生js选项卡
2017-06-05 本文已影响0人
进击的大牛
js实现选项卡
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 460px;
height:500px;
border: 1px solid red;
}
.menu{
width: 100%
}
.menu span{
display: inline-block;
width: 150px;
height: 30px;
border: 1px solid blue;
line-height: 30px;
text-align: center;
margin-right: -5px;
cursor: pointer;
}
.menu span.active{
background: lightseagreen;
color: #fff;
}
.content{
width: 100%;
height: 468px;
}
.content div{
width: 100%;
height: 100%;
border: 1px solid gray;
display: none;
}
.content div:first-child{
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="menu">
<span class="active">菜单1</span>
<span>菜单1</span>
<span>菜单1</span>
</div>
<div class="content">
<div>第一个显示</div>
<div>第二个显示</div>
<div>第三个显示</div>
</div>
</div>
<script>
/* var oBox =document.getElementById("box");
var menu =oBox.querySelectorAll(".menu span");
var content =oBox.querySelectorAll(".content div");
for(var i =0;i<menu.length;i++){
menu[i].setAttribute("data-index",i);
menu[i].onclick=function(){
for(var i =0;i<menu.length;i++){
menu[i].className="";
content[i].style.display="none";
}
this.className="active";
var index =this.getAttribute("data-index");
content[index].style.display="block";
}
}*/
function Tab(json){
this.oBox =document.getElementById(json.id);
this.menu =this.oBox.querySelectorAll(".menu span");
this.content =this.oBox.querySelectorAll(".content div");
var _this =this;
for(var i =0;i<this.menu.length;i++){
this.menu[i].setAttribute("data-index",i);
this.menu[i].onclick=function(){
_this.init(this);
};
}
}
Tab.prototype.init=function(that){
for(var i =0;i<this.menu.length;i++){
this.menu[i].className="";
this.content[i].style.display="none";
}
that.className="active";
var index =that.getAttribute("data-index");
this.content[index].style.display="block";
}
new Tab({
id:"box"
})
</script>
</body>
</html>
