效果圖
面向對象
實戰代碼
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>Js面向對象 tab 動態增加</h4>
<div class="tabs-box" id="tab">
<nav>
<ul>
<li class="liactive"><span>xx</span> </li>
<li class="liactive"><span>xx</span> </li>
<li class="liactive"><span>xx</span> </li>
</ul>
<div class="tab-add">
<span>+</span>
</div>
</nav>
<div class="tab-section">
<section>測試1</section>
<section>測試2</section>
</div>
</div>
</body>
<script src="js/tab.js"></script>
</html>
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')
效果圖
代碼：優化樣式+（切換+清除樣式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.ul {
display: flex;
flex-direction: row;
align-content: space-between;
list-style-type:none
}
.liactive {
border: 2px solid black;
}
.sec {
border: 2px solid skyblue;
}
</style>
</head>
<body>
<h4>Js面向對象 tab 動態增加</h4>
<div class="tabs-box" id="tab">
<nav class="nav">
<ul class="ul">
<li class="liactive"><span>一兩</span> </li>
<li ><span>一塊</span> </li>
<li ><span>一款</span> </li>
</ul>
<div class="tab-add">
<span>+</span>
</div>
</nav>
<div class="tab-section">
<section class="sec">測試1</section>
<section>測試2</section>
<section>測試3</section>
</div>
</div>
</body>
<script src="js/tab.js"></script>
</html>
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