场景：选项页
HTML：
<body>
<div id="center">
<h4>tab栏</h4>
<div class="tabsBox" id="tab">
<!-- tab标签 -->
<nav class="fisrstNav">
<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>
</nav>
<!-- tab内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>CSS：
#center{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
.tabsBox{
width: 500px;
height: 300px;
border: 1px solid #000;
.fisrstNav{
position: relative;
display: flex;
height: 36px;
justify-content: space-between;
border-bottom: 1px solid #000;
ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
li{
position: relative;
height: 35px;
padding: 0 15px;
text-align: center;
line-height: 35px;
border-right: 1px solid #000;
overflow: hidden;
.icon{
position: absolute;
top: -8px;
right: -8px;
width: 18px;
height: 18px;
border-radius: 9px;
background-color: #000;
&::after{
position: absolute;
top: -7px;
right: 9px;
font-size: 6px;
content: 'x';
color: #fff;
}
}
}
.liActive{
color: red;
}
}
.tabadd{
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: 10px;
span{
display: block;
width: 15px;
height: 15px;
border:1px solid #000;
text-align: center;
line-height: 15px;
}
}
}
.tabscon{
section{
display: none;
padding: 15px;
width: 100%;
height: 100px;
}
input{
width: 80%;
height: 100px;
word-wrap: break-word;
}
.conactive{
display: block;
}
}
}
}JS：
var that;
class Tab {
constructor(id) {
that = this;
this.main = document.querySelector(id);
this.ul = this.main.querySelector('.fisrstNav ul')
this.tabscon = this.main.querySelector('.tabscon')
this.add = document.querySelector('.tabadd');
this.init()
}
//初始化相关操作与元素绑定
init() {
this.updataNode();
this.add.onclick = this.addTab;
for (let i = 0; i < this.lis.length; i++) {
this.lis[i].index = i;
this.lis[i].onclick = this.toggleTab;
this.spans[i].ondblclick = this.editTab;
this.removeIcon[i].onclick = this.removeTab;
this.sections[i].ondblclick = this.editTab;
}
}
//更新DOM
updataNode() {
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.removeIcon = this.ul.querySelectorAll('.icon');
this.spans = this.main.querySelectorAll('.fisrstNav li span:first-child');
}
//切换功能
toggleTab() {
that.clearClass()
this.className = 'liActive'
that.sections[this.index].className = 'conactive'
}
//清除样式
clearClass() {
for (let i = 0; i < that.lis.length; i++) {
this.lis[i].className = '';
this.sections[i].className = '';
}
}
//添加功能
addTab() {
that.clearClass()
const li = `<li class="liActive">新选项卡<span class="icon"></span></li>`;
const section = `<section class="conactive">新选项卡</section>`;
// 在ul中最后插入li
that.ul.insertAdjacentHTML('beforeend', li);
// 在.tabscon中最后插入section
that.tabscon.insertAdjacentHTML('beforeend', section);
that.init();
}
//删除功能
removeTab(e) {
//防止冒泡
e.stopPropagation();
var index = this.parentNode.index;
//根据索引删除li和section
that.lis[index].remove();
that.sections[index].remove();
//判断删除是否为选中li
if (document.querySelector('.liActive')) return
index--;
//手动调用li的点击事件
that.lis[index] && that.lis[index].click();
that.init();
}
//修改功能
editTab(){
//双击禁止选中文字
// 双击禁止选中文字
const str = this.innerHTML;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.innerHTML = `<input type="text" />`;
const input = this.children[0];
input.value = str;
//文本框文字处于选中
input.select();
input.onblur = function () {
this.parentNode.innerHTML = this.value;
this.remove;
}
input.onkeyup = function (e) {
if (e.keyCode === 13) {
this.blur();
}
}
}
}
new Tab('#tab')新手自己学习,有什么问题请大家多多谅解