<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0}
.box{
width:400px;
height:300px;
border:10px solid #333;
margin:50px auto;
}
ul,li,ol{
list-style-type:none;
}
.box>ul{
width:100%;
height:40px;
}
.box>ul>li{
width:calc(100% / 3);
text-align:center;
font-size:40px;
height:100%;
float:left;
line-height:40px;
background-color: grey;
cursor:cell;
}
.box>ol{
position:relative;
width:100%;
height:260px;
}
.box>ol>li{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
line-height:260px;
text-align:center;
font-size:50px;
background-color: indianred;
display:none;
}
.box>ol>li.active{
display:block;
}
.box>ul>li.active{
background-color: indigo;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">11</li>
<li>22</li>
<li>33</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="boxx box">
<ul>
<li class="active">11</li>
<li>22</li>
<li>33</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
function Tab(className,options={}){
this.elem=document.querySelector(className)
this.tabs=this.elem.querySelectorAll('ul>li')
this.items=this.elem.querySelectorAll('ol>li')
this.options=options
this.fn()
}
Tab.prototype.fn=function(){
this.tabs.forEach((value,index)=>{
value.addEventListener(this.options.eventType || 'click',()=>{
this.tabs.forEach(value=>value.classList.remove('active'))
this.items.forEach(value=>value.classList.remove('active'))
value.classList.add('active')
this.items[index].classList.add('active')
})
})
}
new Tab('.box')
new Tab('.boxx',{eventType:'mouseover'})
// Tab.prototype.fn=function(){
// console.log(this)
// this.tabs.forEach(function(value){
// console.log(this)
// value.addEventListener('click',()=>{
// console.log(this)
// })
// })
// }
</script>
</html>
