HTML
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>ES6</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <main> <h4> ES6面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> <nav class="firstnav"> <ul> <li class="liactive"><span>标签1</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> <li><span>标签2</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> <li><span>标签3</span><span class="iconfont"><img src="https://mychalk.oss-cn-hangzhou.aliyuncs.com/images/cc.png" /></span></li> </ul> <div class="tabadd"> <span>+</span> </div> </nav> <div class="tabscon"> <section class="conactive">内容1</section> <section>内容2</section> <section>内容3</section> </div> </div> </main> <script src="tab.js"></script> </body> </html>
CSS
*{ margin:0; padding:0; } ul li { list-style:none; } main{ width:960px; height:500px; border-radius:10px; margin:50px auto; } main h4 { height:100px; line-height:100px; text-align:center; } .tabsbox{ width:900px; margin:0 auto; height:400px; border:1px solid lightsalmon; position:relative; } nav ul { overflow:hidden; } nav ul li { float:left; width: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{ width: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; width:20px; height:20px; line-height:20px; text-align:center; border:1px solid #ccc; float:right; margin:10px; user-select:none; } .tabscon{ width: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; width: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
点击添加按钮添加标签
点击叉叉按钮关闭标签