js面向对象写选项卡增删改查效果

<ul>

</ul>

</div>

<ul>

<li><span>测试一OK</span></li>

<li><span>测试二OK</span></li>

<li><span>测试三OK</span></li>

</ul>

</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一个that属性

this.main.children[0].querySelector('button').that = this; //给按钮一个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;

}

//执行各项操作时都要查一遍

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>测试</span><span>×</span>';

li.className = "active";

lis.innerHTML = "<span>测试" + this.that.js++ +"</span>";

this.parentNode.parentNode.children[1].children[0].appendChild(lis);

this.that.ul.appendChild(li); //this=按钮,this.that=this=构造函数,this.that.ul,等于this[构造函数].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="暂无内容";

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');

}