<div?class="xxk"?id="tab">
????????????<div?class="lanmu">
????????????????<ul>
????????????????????<li?class="active"><span>測(cè)試一</span><span>×</span></li>
????????????????????<li><span>測(cè)試二</span><span>×</span></li>
????????????????????<li><span>測(cè)試三</span><span>×</span></li>
????????????????</ul>
????????????????<button>+</button>
????????????</div>
????????????<div?class="Content">
????????????????<ul>
????????????????????<li><span>測(cè)試一OK</span></li>
????????????????????<li><span>測(cè)試二OK</span></li>
????????????????????<li><span>測(cè)試三OK</span></li>
????????????????</ul>
????????????</div>
?</div>
.css
*{margin:0 auto;padding:0;}
.xxk{width:800px;border:1px solid red;}
li{list-style:none;}
.lanmu{border-bottom: 1px solid #DDD;display: flex;justify-content: space-between;}
.lanmu ul{display: flex;width: 100%;}
.lanmu ul li{font-size:0.75rem;position: relative;box-sizing: border-box;cursor:pointer;width: 100px;line-height:30px;margin: 0;text-align: center;border-right: 1px solid #DDD;cursor:pointer;}
.Content ul li{height: 300px;}
.lanmu ul li span:last-child{position: absolute;top: 0;right:5px;}
.lanmu>button{font-size: 20px;margin-right:20px;cursor:pointer;height: 30px;padding: 0 10px;}
.active{background: #aaa;}
.lanmu ul li:hover{background:#ddd;}
.lanmu ul li span:last-child:hover{color: red;}
.Content ul li{display: none;}
.Content ul li:first-child{display: block;}
.lanmu ul li input[type="text"]{width: 60px;line-height: 20px;font-size: 12px;}
.js
class Tab {
constructor(id) {
this.main = document.querySelector(id);
this.ul = this.main.children[0].querySelector('ul');
this.ul.that = this; //給ul一個(gè)that屬性
this.main.children[0].querySelector('button').that = this; //給按鈕一個(gè)that屬性
this.main.children[0].querySelector('button').onclick = this.add;
this.select();
this.main.children[1].children[0].children[0].style.display = "block";
this.js = 4;
}
//執(zhí)行各項(xiàng)操作時(shí)都要查一遍
select() {
this.li = this.ul.children;
for (let i = 0; i < this.li.length; i++) {
this.main.children[1].children[0].children[i].style.display = "none";
this.li[i].index = i;
this.main.children[1].children[0].children[i].children[0].ondblclick=this.ul.that.edit;
this.li[i].children[0].ondblclick = this.ul.that.edit;
this.li[i].children[1].onclick = this.ul.that.remove;
this.li[i].onclick = this.ul.that.toggle;
}
}
add() {
var li = document.createElement('li');
var lis = document.createElement('li');
document.querySelector('.active').className = "";
li.innerHTML = '<span>測(cè)試</span><span>×</span>';
li.className = "active";
lis.innerHTML = "<span>測(cè)試" + this.that.js++ +"</span>";
this.parentNode.parentNode.children[1].children[0].appendChild(lis);
this.that.ul.appendChild(li); //this=按鈕,this.that=this=構(gòu)造函數(shù),this.that.ul,等于this[構(gòu)造函數(shù)].ul=4行
this.that.select();
this.parentNode.parentNode.children[1].children[0].children[this.parentNode.parentNode.children[1].children[0].children.length - 1].style.display = "block";
}
//切換功能
toggle() {
document.querySelector('.active').className = "";
this.className = "active";
this.parentNode.that.select();
this.parentNode.that.main.children[1].children[0].children[this.index].style.display = "block";
}
//刪除功能
remove(e) {
e.stopPropagation();
if (this.parentNode.parentNode.children.length > 1)
{
var ul = this.parentNode.parentNode;
var i = this.parentNode.index - 1;
ul.children.length > 1 && this.parentNode.parentNode.removeChild(this.parentNode);
ul.that.main.children[1].children[0].children.length > 1 && ul.that.main.children[1].children[0].removeChild(ul.that.main.children[1].children[0].children[this.parentNode.index]);
if (this.parentNode.className == 'active') {
if (i == -1) {
i = 0;
}
else if (ul.children[i + 1]) i = i + 1;
ul.children[i].className = 'active';
}
ul.that.select();
if (this.parentNode.className == 'active')
ul.that.main.children[0].children[0].children[i].click()
else
ul.that.main.children[0].children[0].querySelector('.active').click();
}
}
//修改功能
edit() {
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();//禁止選中文字
var str=this.innerText;
var li=this.parentNode;
this.innerHTML='<input type="text"></input>';
var input=this.children[0];
input.value=str;
input.select();//選中文本框里面的文字
input.onblur=function()
{
if(this.value=="")
{
this.value="暫無內(nèi)容";
this.parentNode.style.color="red";
}
this.parentNode.innerText=this.value;
}
input.onkeyup=function(e)
{
if(e.keyCode===13)
{
this.blur();
}
}
}
}
window.onload = function()
{
new Tab('#tab');
}
