HTML页面，CSS和JS已经引入，直接复制即可
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title>ES6</title> 7 <link rel="stylesheet" type="text/css" href="http://tab.wuliwu.top/style.css" /> 8 </head> 9 <body> 10 <main> 11 <h4> 12 ES6面向对象 动态添加标签页 13 </h4> 14 <div class="tabsbox" id="tab"> 15 <nav class="firstnav"> 16 <ul> 17 <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> 18 <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> 19 <li><span>标签3</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> 20 </ul> 21 <div class="tabadd"> 22 <span>+</span> 23 </div> 24 </nav> 25 <div class="tabscon"> 26 <section class="conactive">内容1</section> 27 <section>内容2</section> 28 <section>内容3</section> 29 </div> 30 </div> 31 32 </main> 33 <script src="http://tab.wuliwu.top/tab.js"></script> 34 </body> 35 </html>
CSS
*{ margin:0; padding:0; } ul li { list-style:none; } main{ 960px; height:500px; border-radius:10px; margin:50px auto; } main h4 { height:100px; line-height:100px; text-align:center; } .tabsbox{ 900px; margin:0 auto; height:400px; border:1px solid lightsalmon; position:relative; } nav ul { overflow:hidden; } nav ul li { float:left; 100px; height:50px; line-height:50px; text-align:center; border-right:1px solid #ccc; position:relative; } nav ul li.liactive{ border-bottom:2px solid #fff; z-index:9; } #tab input{ 80%; height:60%; } nav ul li span:last-child{ position:absolute; user-select:none; font-size:12px; top:-10px; right:0; display:inline-block; height:20px; } .tabadd { position:absolute; top:0; right:0; } .tabadd span{ display:block; 20px; height:20px; line-height:20px; text-align:center; border:1px solid #ccc; float:right; margin:10px; user-select:none; } .tabscon{ 100%; height:300px; position:absolute; padding:30px; top:50px; left:0px; box-sizing:border-box; border-top:1px solid #ccc; } .tabscon section,.tabscon section.conactive{ display:none; 100%; height:100%; } .tabscon section.conactive{ display:block; }
JS
var 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.fsection = this.main.querySelector('.tabscon'); this.init(); } init() { this.updateNode(); //init 初始化操作，绑定相关的绑定事件 this.add.onclick = this.addTab; for (var 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('.iconfont'); this.spans = this.main.querySelectorAll('.firstnav li span:first-child'); } //1.切换功能 toggleTab() { that.clearClass(); this.className = 'liactive'; that.sections[this.index].className = 'conactive'; } //清楚所有li和scction的类 clearClass() { for (var i = 0; i < this.lis.length; i++) { this.lis[i].className = ''; that.sections[i].className = ''; } } //2.添加功能 addTab() { that.clearClass(); var random = Math.random(); var li = '<li class="liactive"><span>新加标签</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li>'; var section = '<section class="conactive">内容 ' + random + '</section>'; that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section); that.init(); } //3.删除功能 removeTab(e) { e.stopPropagation();//阻止冒泡 防止出发li 的切换事件 var index = this.parentNode.index;//获取索引号等于父元素的索引号 //根据索引号删除对应的li和section remove（）方法可以直接删除指定元素 that.lis[index].remove(); that.sections[index].remove(); that.init(); //当删除的不是选中状态的li时，原来的选中状态保持不变 if (document.querySelector('.liactive')) return; //当删除选中状态的li时，前一个li处于选定状态 index--; //手动调用点击事件，如果存在索引号则触发，否则不触发点击事件 that.lis[index] && that.lis[index].click(); } //4.修改功能 editTab() { var str = this.innerHTML; //双击禁止选定文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); this.innerHTML = '<input type="text" />'; var input = this.children[0];//定义inpot等于span的第一个子元素 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");//实例一个对象
初始页面
点击标签2
点击添加按钮添加标签
点击叉叉按钮关闭标签