// 书写构造函数
// function Tabs(ele,type) {}
function Tabs(ele,type) {
// 范围
this.ele = document.querySelector(ele);
// 在范围内找到所有的可以点击的盒子
this.btns = this.ele.querySelectorAll("ul>li");
// 在范围内找到所有需要切换显示的盒子
this.tabs = this.ele.querySelectorAll("ol>li");
//方法一：
this.change(type);
//这里写也可以
//方法二：
// this.change();
// this.type=type;
//这里写也可以
}
// 原型上书写方法
// Tabs.prototype.change = function () {
Tabs.prototype.change = function (type) {
// 执行给所有btns里面的按钮添加点击事件
// 我怎么拿到btns
// console.log(this.btns);
// 提前保存一下this
// var _this = this;
for (let i = 0; i < this.btns.length; i++) {
// 提前保存索引
// this.btns[i].setAttribute("index", i);
// this.btns[i].addEventListener(this.type,()=> {})
this.btns[i].addEventListener(type,()=> {
// this.btns[i].onclick = function () {
// 需要让实例的btns里面的每一个没有active类名
// 需要让实例的tabs里面的每一个没有active类名
// 这里不是在 change 函数的作用域了，而是事件处理函数的作用域
// 在事件处理函数里面,this指向当前事件的事件源
// console.log(_this);
// 当你访问_this其实是在访问变量，自己作用域里没有，就会去上一级作用域查找
var index=i;
for (var j = 0; j < this.btns.length; j++) {
this.btns[j].className = "";
this.tabs[j].className = "";
}
// 让当前点击的这个li有active类名
// 注意当前的this不是绑定事件的按钮了，也要按照索引号
this.btns[index].className = "active";
// 让实例身上的tabs立面索引对应的那一个li有active类名
// 拿到当前li身上保存的索引
// var index=this.getAttribute('index');
// console.log(typeof index); string
// var index = this.getAttribute("index") - 0;
this.tabs[index].className = "active";
})
}
};
// 使用的时候
// 选项卡就可以使用了
var t = new Tabs("#box",'click');
var t2 = new Tabs("#box2",'mouseover');
// 实例对象在调用方法
// 函数调用方法 对象.函数名()
// 函数内部的this 就是指向点前面的xxx
// 我在change 函数里面写的this 就是t
// t.change();
// t.change(type);
// t2.change();
// t2.change(type);
// console.log(t);
//优化：
//把函数改成箭头函数，省去了还得声明一个_this
// 用let省去了还得用index
// change可以直接放在构造函数里,new完自动执行
// 事件类型也可以当作参数传进去，让两个选项卡一个是click，一个是mouseover
// 但是绑定事件的方式换成addEventListener再传type
//new Tabs("#box1" ,"mouseover")
export {Tabs}<style>
* {
margin: 0;
padding: 0;
}
ul,
li,
ol {
list-style: none;
}
.tab {
display: flex;
flex-direction: column;
width: 400px;
height: 500px;
border: 1px solid black;
}
.tab-list {
display: flex;
height: 60px;
font-size: 20px;
color: white;
background-color: skyblue;
}
.tab-content {
flex: 1px;
position: relative;
background-color: pink;
}
.tab-content li {
position: absolute;
display: flex;
left: 0;
top: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
font-size: 100px;
color: aliceblue;
display: none;
}
.tab-list li {
display: flex;
flex: 1px;
height: 60px;
border: 1px solid black;
justify-content: center;
align-items: center;
}
.tab-list > li.active {
display: flex;
background-color: orange;
}
.tab-content > li.active {
display: flex;
}
</style>
</head>
<body>
<div class="tab" id="box">
<ul class="tab-list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol class="tab-content">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab" id="box2">
<ul class="tab-list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol class="tab-content">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script type="module">
import {Tabs} from './Tabs.js'
new Tabs( "#box" , "click")
new Tabs( "#box2" , "mouseover")
</script>