**
废话不说，看代码
**
html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab栏特效</title>
<style>
* {
margin: 0;
padding: 0
}
li {
list-style: none
}
a {
text-decoration: none
}
input {
outline: none;
}
#Tab {
position: relative;
width: 900px;
height: 500px;
margin: 40px auto;
border: 1px solid #000
}
#ul {
width: 100%;
height: 50px;
border-bottom: 1px solid #000000
}
#ul li {
position: relative;
float: left;
width: 90px;
height: 50px;
text-align: center;
line-height: 50px;
border: none;
border-right: 1px solid #000000;
cursor: pointer
}
#ul>li span:first-child {
display: inline-block;
width: 100%;
color: #000
}
#ul>li span:nth-child(2) {
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 25px;
line-height: 25px;
font-size: 20px;
border: 1px solid #000000;
background-color: pink;
color: #000;
}
#ul>li span input {
position: absolute;
left: 2px;
top: 8px;
width: 82px;
height: 30px;
outline: none;
}
#ul .bottom-class {
border-bottom: 1px solid #ffffff
}
#nei-div {
width: 100%;
height: 200px;
padding-top: 30px;
padding-left: 30px;
}
#nei-div div {
display: none;
width: 100%;
height: 100%;
font-size: 24px;
}
#nei-div .none-div {
display: block
}
#a-btn {
position: absolute;
top: -13px;
right: 80px;
font-size: 50px
}
#nei-div>div input {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="Tab">
<ul id="ul">
<li class="bottom-class"><span>1</span><span>X</span></li>
<li><span>2</span> <span>X</span></li>
<li><span>3</span> <span>X</span></li>
<li><span>4</span> <span>X</span></li>
</ul>
<div id="nei-div">
<div class="none-div">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
<a href="javascript:;"id="a-btn">+</a>
<div id="app"></div>
</div>
</body>
<script src="js/tab.js"></script>
</html>
js代码：
var ther;
class Tab {
//获取元素
constructor(id) {
ther = this;
this.tab = document.querySelector(id);
this.add = this.tab.querySelector("#a-btn");
this.ul = document.querySelector("#ul");
this.neidiv = document.querySelector("#nei-div")
this.inon();
}
//动态生成，需要重新获取元素
getElement() {
this.lis = this.tab.querySelectorAll("li");
this.divs = document.querySelector("#nei-div").querySelectorAll("div");
this.span = document.querySelector("#ul").querySelectorAll(" li span:nth-child(2)");
}
inon() {
//重新调用获取元素
this.getElement();
//a-btna链接添加选项按钮
this.add.onclick = this.addTab;
//首先是所用li便利，其他元素也可借li便利
for (var i = 0; i < this.lis.length; i++) {
//为了点击每个li所对应的内容元素div，所以先设置一个index给div做索引号
this.lis[i].index = i;
//每个li做点击事件，调用toogleTab
this.lis[i].onclick = this.toogleTab;
//每个span删除选项做点击事件,调用deleteOption
this.span[i].onclick = this.deleteOption;
//每个li的第一个子元素节点span做双点击事件 调用inputModify
this.lis[i].children[0].ondblclick = this.inputModify;
//每个内容div做双点击事件 调用inputModeify
this.divs[i].ondblclick = this.inputModify;
}
}
//去除类功能
deleteClass() {
for (var i = 0; i < ther.lis.length; i++) {
//所有li选项以及对应的内容“去除类”
ther.lis[i].className = "";
ther.divs[i].className = "";
}
}
//添加类功能
toogleTab() {
ther.deleteClass();
//所有选项li以及对应的内容的元素"添加类"
this.className = "bottom-class";
ther.divs[this.index].className = "none-div";
}
//添加功能
addTab() {
//调用delteClass去除类
ther.deleteClass();
//用字符串的形式创建li元素以及它对应的内容元素div
var li = '<li class="bottom-class"><span>1</span><span>X</span></li>',
div = '<div class="none-div">内容1</div>';
//由于是addTab是add调用的，而add里没有ul，所以利用把this赋值给ther的全部变量来操作
ther.ul.insertAdjacentHTML("beforeend", li);
//这里依然是借用ther这个全局变量
ther.neidiv.insertAdjacentHTML("beforeend", div);
//由于以上是新创建选项的代码，所以之前选项点击事件并没有算上新创建的，所以在此调用inon(),
//里面有重新调取所以选项li以及其他相关元素
ther.inon();
}
//点击span删除li及其对应的div内容功能
deleteOption(e) {
//防止事件冒泡。参数.stopPropagation();
e.stopPropagation();
//获取当前span父亲li的索引号赋值给变量index
var index = this.parentNode.index;
//删除这个索引号相对应的li以及后面索引号所对应的div
ther.lis[index].remove();
ther.divs[index].remove();
//再次调用inon();防止后面所创建的落下
ther.inon();
//如果删除某一个选项，其中有选中状态的，就执行return，依旧是当前选中状态，return后面的代码不执行
if (document.querySelector(".bottom-class")) return;
//防止删除最后一个选项出现错误！！！，如果删除的是当前选项，就索引号index--，
index--;
//index--后如果有当前index--所对应的li 则执行后面给当前删除选项的前一项做点击事件不用加on
ther.lis[index] && ther.lis[index].click();
}
//修改功能
inputModify() {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//如果当前的span有子元素,那么条件为true，则执行return，return后面代码就都不执行
if (this.children[0]) return;
//当前span的文本内容赋值给一个变量
var str = this.innerHTML;
//在当前span里用字符串的形式创建一个input元素
this.innerHTML = '<input type="text"/>';
//获取当前那个创建的input元素，用父元素.children[子元素索引号]方法
var input = this.children[0];
//把当前span的文本内容赋值给创建的input.value
input.value = str;
//select()方法为文字选中
input.select();
//当input失去焦点时把它的value内容赋值给它的父亲span，用子元素.parentNode
input.onblur = function() {
this.parentNode.innerHTML = this.value;
}
//input做键盘事件，如果按住的是键盘键(13)再次调用blur(也就是onblur事件，注意再次调用不要on)
input.onkeyup = function(e) {
if (e.keyCode === 13) {
this.blur();
}
}
}
}
new Tab("#Tab");
var ul = document.querySelector("#ul").querySelectorAll("li sapn:nth-child(2)");
console.log(ul);
4599
