html多栏切换网页代码,【前端】Javascript高级篇-tab切换栏（案例1）

效果图

面向对象

实战代码

index.html

Js面向对象 tab 动态增加

• xx
• xx
• xx

+

测试1

测试2

tab.js一lis绑定点击事件和序号

class Tab {

constructor(id) {

// 获取元素

this.main = document.querySelector(id)

this.lis = document.querySelectorAll('li')

this.section = document.querySelectorAll('section')

this.init()

}

// 初始化绑定相关元素

init() {

for(var i = 0; i < this.lis.length; i++) {

this.lis[i].index = i

this.lis[i].onclick = function() {

console.log(this.index)

}

}

}

// 切换

toggleTab() {

}

// 添加

addTab() {

}

// 删除

removeTab() {

}

// 修改

eidtTab() {

}

}

new Tab('#tab')

效果图

代码：优化样式+(切换+清除样式)

.ul {

display: flex;

flex-direction: row;

align-content: space-between;

list-style-type:none

}

.liactive {

border: 2px solid black;

}

.sec {

border: 2px solid skyblue;

}

Js面向对象 tab 动态增加

• 一两
• 一块
• 一款

+

测试1

测试2

测试3

js

var that

class Tab {

constructor(id) {

that = this

// 获取元素

this.main = document.querySelector(id)

this.lis = document.querySelectorAll('li')

this.sections = document.querySelectorAll('section')

this.init()

}

// 清除样式

clearClass() {

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].className = '',

this.sections[i].className = ''

}

}

// 初始化绑定相关元素

init() {

for(var i = 0; i < this.lis.length; i++) {

this.lis[i].index = i

this.lis[i].onclick = this.toggleTab

}

}

// 切换

toggleTab() {

// 先清空

that.clearClass()

// 点谁就给谁添加样式

console.log(this.index)

this.className = 'liactive'

that.sections[this.index].className = 'sec' // 注意当前this表示lis

}

// 添加

addTab() {

}

// 删除

removeTab() {

}

// 修改

eidtTab() {

}

}

new Tab('#tab')

效果图

增加

先增加 li 和 section 然后追加到列表中

添加点击事件

var that

class Tab {

constructor(id) {

that = this

// 获取元素

this.main = document.querySelector(id)

this.lis = this.main.querySelectorAll('li')

this.sections = this.main.querySelectorAll('section')

this.add = this.main.querySelector('.tab-add')

this.init()

}

// 清除样式

clearClass() {

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].className = '',

this.sections[i].className = ''

}

}

// 初始化绑定相关元素

init() {

// 添加事件

this.add.onclick = this.addTab

for(var i = 0; i < this.lis.length; i++) {

this.lis[i].index = i

this.lis[i].onclick = this.toggleTab

}

}

// 切换

toggleTab() {

// 先清空

that.clearClass()

// 点谁就给谁添加样式

console.log(this.index)

this.className = 'liactive'

that.sections[this.index].className = 'sec' // 注意当前this表示lis

}

// 添加

addTab() {

alert(11)

}

// 删除

removeTab() {

}

// 修改

eidtTab() {

}

}

new Tab('#tab')

为节约时间选择性实现，后续大家感兴趣可以看教程了解跟进

https://www.bilibili.com/video/BV1YJ411L75N?p=14

本文同步分享在 博客“瑞 新”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。