一、功能要求:
1、点击 tab 栏,可以切换效果.
2、点击 + 号,可以添加 tab 项和内容项.
3、点击 x 号,可以删除当前的 tab 项和内容项.
4、双击tab项文字或者内容项文字,可以修改里面的文字内容.
二、代码实现
代码每一步都有注解,在此就不一一赘述。
1. 结构 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态标签页</title>
<link rel="stylesheet" href="./CSS/index.css">
<link rel="stylesheet" href="../../font/font_2099015_z5uhbhlgbqn/iconfont.css">
</head>
<body>
<div class="tabBox" id="tab">
<!-- tab 标签 -->
<div class="nav">
<ul>
<li class="liactive"><span>测试1</span> <span class="icon"></span></li>
<li><span>测试2</span> <span class="icon"></span></li>
<li><span>测试3</span> <span class="icon"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</div>
<!-- tab 内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
<script src="./JS/index.js"></script>
</body>
</html>
2. 样式 index.css
* {
margin: 0;
padding: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
ul {
list-style: none;
}
/* tab 标签 */
#tab input {
width: 80%;
height: 60%;
}
.tabBox {
width: 800px;
height: 500px;
margin: 50px auto;
border: 1px solid lightsalmon;
}
.nav {
position: relative;
height: 100px;
}
ul li {
position: relative;
float: left;
width: 80px;
border-right: 1px solid #4c4c4c;
text-align: center;
line-height: 100px;
}
.liactive {
border-bottom: 2px solid #fff;
z-index: 9;
}
.tabadd {
position: absolute;
right: 10px;
top: 25px;
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.3);
}
.tabadd span {
font-size: 50px;
line-height: 40px;
margin-left: 6px;
cursor: pointer;
}
.icon {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
}
.icon::after{
position: absolute;
top: -42px;
right: 0;
font-family: iconfont;
content: '\ea42';
font-size: 12px;
}
/* tab 内容 */
.tabscon {
height: 400px;
padding: 20px 20px ;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
section {
display: none;
}
.conactive {
display: block;
width: 400px;
height: 200px;
}
3. 行为 index.js
var that; // 定义一个全局变量
class Tab {
constructor(id) {
// 获取元素
that = this; // 将 that 指向 tab
this._main = document.querySelector(id);
console.log(this._main);
this.add = this._main.querySelector('.tabadd');
this.ul = this._main.querySelector('.nav ul:first-child');
this.fasection = this._main.querySelector('.tabscon');
this.init();
}
//初始化
init () {
// 更新节点
this.updateNode();
// 增加事件
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;
this.remove[i].onclick = this.removeTab;
this.spans[i].ondblclick = this.editTab;
this._section[i].ondblclick = this.editTab;
}
}
// 更新节点
updateNode() {
this._lis = this._main.querySelectorAll('li');
this._section = this._main.querySelectorAll('section');
this.remove = this._main.querySelectorAll('.icon');
this.spans = this._main.querySelectorAll('.nav li span:first-child');
}
// 切换
toggleTab() {
that.clearClass();
this.className = "liactive"; // 此处 this 指向 li
that._section[this.index].className = "conactive"; // 由于 li 下没有section,故用 that (指向tab)
}
// 删除类
clearClass() {
for (var i = 0; i < this._lis.length; i++) {
this._lis[i].className = "";
this._section[i].className = "";
}
}
//添加
addTab() {
that.clearClass();
var random = Math.random();
// 创建 新元素
var li = '<li class="liactive"><span>新选项卡</span> <span class="icon"></span></li>';
var action = '<section class="conactive">测试XXX ' + random + '</section>'
// 添加新元素
that.ul.insertAdjacentHTML("beforeend", li);
that.fasection.insertAdjacentHTML("beforeend", action);
that.init();
}
//删除
removeTab(e) {
e.stopPropagation(); // 防止事件冒泡,出现 li 的索引
var index = this.parentNode.index;
console.log(index);
that._lis[index].remove();
that._section[index].remove();
that.init(); // 元素删除后再获取一次节点 节点更新
// 当我们删除的不是选中状态的 li ,原来的选中状态 li 保持不变
if(document.querySelector('.liactive')) return;
index--;
that._lis[index] && that._lis[index].click(); // 手动调用点击事件 当删除一个 li 将焦点处于前一个 li
}
//修改
editTab() {
var str = this.innerHTML;
// 双击不会选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.innerHTML = " <input type='text' /> ";
var input = this.children[0];
input.value = str;
input.select();
// 当我们离开文本框九八文本框的值给 span
input.onblur = function () {
this.parentNode.innerHTML = this.value;
}
// 按回车也能赋值
input.onkeyup = function(e) {
if (e.keyCode === 13) {
this.blur();
}
}
}
}
new Tab('#tab');
总结
加油!!!