tab切换栏的 增删改操作

效果图 简单写个css 无关美丑 能实现功能就ok

tab.html

tab.js

let that
class Tab{
	constructor(id){
		that = this
		this.main = document.querySelector(id);
		this.add = this.main.querySelector('.tabadd')
		this.ul = this.main.querySelector('.firstnav ul:first-child')
		this.fasection = this.main.querySelector('.tabscon')
		this.init()
	}
	//初始化操作让相关的元素绑定事件
	init(){
		that.updateNode()
		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.remove[i].onclick = this.removeTab
			this.spans[i].ondblclick = this.editTab
			this.sections[i].ondblclick = this.editTab
		}
	}
	//动态添加元素 需要从新获取对应的元素 获取多个元素 都放在这个方法里面
	updateNode(){
		this.lis = this.main.querySelectorAll('li');
		this.sections = this.main.querySelectorAll('section')
		this.remove = this.main.querySelectorAll('.icon-guanbi');
		this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
	}
	//切换功能
	toggleTab(){
		that.clearClass()
		this.className = 'liactive';
		that.sections[this.index].className = 'conactive'
	}
	clearClass(){
		for(let i = 0; i < this.lis.length; i++){
			this.lis[i].className = '';
			this.sections[i].className = ''
		}
	}
	//添加功能
	addTab(){
		that.clearClass()
		let random = Math.random()
		//创建li元素和section元素
		let li = '<li class="liactive"><span>添加测试</span><span class="iconfont icon-guanbi">×</span></li>';
		let section = '<section class="conactive">测试 ' + random + '</section>'
		//把这两个元素追加到对应的父元素里面
		that.ul.insertAdjacentHTML('beforeend', li);
		that.fasection.insertAdjacentHTML('beforeend', section)
		that.init()
	}
	//删除功能
	removeTab(e){
		e.stopPropagation();//阻止冒泡 防止触发li的切换点击事件
		let index = this.parentNode.index;
		console.log(index);
		that.lis[index].remove();
		that.sections[index].remove();
		that.init();
		//当我们删除的不是选中状态的li的时候 原来的选中状态li保持不变
		if (document.querySelector('.liactive')) return;
		//当我们删除了选中状态的那个li的时候，让它的前一个li变成选中状态
		index--;
		//手动调用我们的点击事件，不需要鼠标触发  判断当前的li是否存在 存在 再执行点击事件
		that.lis[index] && that.lis[index].click()
	}
	//修改功能
	editTab(){
		let str = this.innerHTML;
		//双击禁止选中文字
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
		this.innerHTML = '<input type="text" />'
		let 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')

备注：来源于bilbil课程学习