class Tab {
constructor(id) {
this.main = document.querySelector(id);
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.init();
}
//初始化 让相关元素绑定事件
init() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].index = i;//自定义属性index
this.lis[i].onclick = this.toggleTab;
}
}
//1.切换功能
toggleTab() {
console.log(this.index);
}
//2.添加功能
addTab() {
}
//3.删除功能
removeTab() {
}
//4.修改功能
editTab() {
}
}
var tab = new Tab('.tabsbox');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>面向对象 Tab</title>
<link rel="stylesheet" href="css/tab.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/tab.js"></script>
</head>
<body>
<main>
<h4>
Js 面向对象 动态添加标签页
</h4>
<div class="tabsbox" id="tab">
<!-- tab 标签 -->
<nav class="fisrstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab 内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
</main>
</body>
</html>
