【前端】Javascript高级篇-tab切换栏（案例1）
【前端】Javascript高级篇-tab切换栏（案例1）
瑞新
发布于 2020-07-07 18:04:47
发布于 2020-07-07 18:04:47
文章目录
- 效果图
- 面向对象
- 实战代码
- index.html
- tab.js一lis绑定点击事件和序号
- 效果图
- 代码：优化样式+（切换+清除样式）
- 效果图
- 增加
效果图
在这里插入图片描述
面向对象
在这里插入图片描述
实战代码
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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录