面向对象选项卡tab切换

最新推荐文章于 2023-11-17 10:07:22 发布

原创最新推荐文章于 2023-11-17 10:07:22 发布 · 210 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

ol, ul, li {

list-style: none;

}

.box {

width: 400px;

height: 300px;

border: 2px solid #333;

margin: 30px auto;

display: flex;

flex-direction: column;

}

.box > ul {

height: 60px;

display: flex;

}

.box > ul > li {

flex: 1;

height: 100%;

background-color: skyblue;

color: #fff;

font-size: 30px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

}

.box > ul > li.active {

background-color: orange;

}

.box > ol {

flex: 1;

position: relative;

}

.box > ol > li {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

background-color: purple;

color: #fff;

font-size: 100px;

display: none;

}

.box > ol > li.active {

display: flex;

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

</ol>

</div>

<ul>

</ul>

<ol>

</ol>

</div>

面向对象的思想

+ 需要找到一个机器

+ 这个机器可以创建完成选项卡功能的对象

function Tabs(select, type = 'click') {

this.ele = document.querySelector(select)

this.btns = this.ele.querySelectorAll('ul > li')

this.boxs = this.ele.querySelectorAll('ol > li')

this.type = type

this.change()

}

Tabs.prototype.change = function () {

for (let i = 0; i < this.btns.length; i++) {

this.btns[i].addEventListener(this.type, () => {

for (let j = 0; j < this.btns.length; j++) {

this.btns[j].classList.remove('active')

this.boxs[j].classList.remove('active')

}

this.btns[i].classList.add('active')

this.boxs[i].classList.add('active')

})

}

new Tabs('.tab1')

new Tabs('.tab2')

</script>

面向对象选项卡

思想:

+ 首先有一个 "机器"(构造函数)

+ 能创建出一个对象, 对象需要可以完成选项卡功能

+ 使用这个构造函数去创建一个对象

+ 使用这个对象完成选项卡功能

抽象:

+ 创建出来的对象需要能完成选项卡功能

+ 明确, 创建出来的对象有哪些属性和方法

+ 实例对象: {

btns: 存储的是所有的按钮,

boxs: 存储的是所有的切换盒子,

__proto__: {

方法: 能操作实例对象的所有按钮绑定事件, 完成选项卡逻辑

}

+ 只要有了一个这样的实例化对象

=> 我们只需要调用实例对象.方法名() 选项卡就完成了

代码实现:

1. 需要一个范围元素

=> 确定我最终的效果出现在哪一个元素内部

// function Tabs(select, type = 'click') {

// // select 是一个选择器, 我能根据选择器去获取到一个元素, 作为我的范围元素使用

// // this.ele 是利用 select 获取到的范围元素

// this.ele = document.querySelector(select)

// // 完成选项卡需要的属性书写在构造函数体内

// // this.ele.querySelectorAll

// // 从 this.ele 这个元素内去查找 ul 下的 li

// this.btns = this.ele.querySelectorAll('ul > li')

// this.boxs = this.ele.querySelectorAll('ol > li')

// this.type = type

// // 在构造函数体内 this 就是那个自动创建出来的对象

// this.change()

// }

// // 完成选项卡的方法需要书写在 prototype

// Tabs.prototype.change = function a() {

// // 选项卡的业务逻辑

// for (let i = 0; i < this.btns.length; i++) {

// this.btns[i].addEventListener(this.type, () => {

// // 需要给当前实例身上的 btns 和 boxs 里面的每一个取消 active 类名

// // this 是谁, 这个函数 b 是作为事件处理函数使用的

// // this 是当前事件源, 你点击的那一个 li, 不在是当前实例

// // 把这个事件处理函数修改为箭头函数, 保证让 this 依旧是当前实例

// for (let j = 0; j < this.btns.length; j++) {

// this.btns[j].classList.remove('active')

// this.boxs[j].classList.remove('active')

// }

// this.btns[i].classList.add('active')

// this.boxs[i].classList.add('active')

// })

// }

// 使用 Tabs 去创建实例对象

// 我的 t1 变量现在有什么作用

// 打印的位置, 会报错, 如果不打印, 不需要使用 t1 的

// 调用 change 的时候, 如果没有 t1 , 不能调用, 如果不需要调用 change, 可以不写 t1

// const t1 = new Tabs('.tab1', 'mouseover')

// 为什么 t1 可以调用 change

// 因为 new Tabs 的时候, 内部的自动创建的那个对象呗返回后赋值给了 t1

// 实际上是 t1 在调用 change

// 还是那个自动创建出来的对象在调用 change

// t1.change()

// 如果你想出现第二个选项卡的时候

// new Tabs('.tab2')

面向过程选项卡

// 1. 获取元素

// const btns = document.querySelectorAll('ul > li')

// const boxs = document.querySelectorAll('ol > li')

// // 2. 循环绑定事件

// for (let i = 0; i < btns.length; i++) {

// btns[i].onclick = function () {

// for (let j = 0; j < btns.length; j++) {

// btns[j].classList.remove('active')

// boxs[j].classList.remove('active')

// }

// btns[i].classList.add('active')

// boxs[i].classList.add('active')

// }

</script>

</body>

</html>