- A+
所属分类：Web前端
功能要求：
- 点击 tab 栏，可以切换效果.
- 点击 + 号，可以添加 tab 项和内容项.
- 点击 x 号，可以删除当前的 tab 项和内容项.
- 双击tab项文字或者内容项文字，可以修改里面的文字内容.
代码实现：
Obj_TAB.html（复制并保存为html文件，打开即可见效果）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>面向对象 Tab</title> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/Obj_TAB.css"> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/Obj_TAB_style.css"> </head> <main> <div class="tabsbox" id="tab"> <!-- tab 标签 --> <nav class="firstnav"> <ul> <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li> <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li> <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li> </ul> <div class="tabadd"> <span>+</span> </div> </nav> <!-- tab 内容 --> <div class="tabscon"> <section class="conactive">测试1</section> <section>测试2</section> <section>测试3</section> </div> </div> </main> <script src="https://blog-static.cnblogs.com/files/jacklzx/Obj_TAB.js"></script> </body> </html> Obj_TAB.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; cursor: pointer; } 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: -18px; right: 0; display: inline-block; height: 20px; } .tabadd { position: absolute; top: 0; right: 0; cursor: pointer; } .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; } Obj_TAB.js：
var that; class Tab { constructor(id) { that = this; this.main = document.querySelector(id); // this.lis = this.main.querySelectorAll('li'); // this.sections = this.main.querySelectorAll('section'); this.add = this.main.querySelector('.tabadd'); // this.remove = this.main.querySelectorAll('.icon-guanbi'); this.ul = this.main.querySelector('.firstnav ul:first-child'); this.fsection = this.main.querySelector('.tabscon'); this.init(); } init() { this.updateNode(); 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; } } // 获取所有li和section 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'); } // 1.切换 toggleTab() { that.clearClass(); this.className = 'liactive'; that.sections[this.index].className = 'conactive'; } clearClass() { for (var i = 0; i < this.lis.length; i++) { this.lis[i].className = ''; this.sections[i].className = ''; } } // 2. 添加 addTab() { that.clearClass(); var random = Math.random(); // 创建 var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></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(); // 阻止冒泡 var index = this.parentNode.index; // console.log(index); that.lis[index].remove(); that.sections[index].remove(); that.init(); // 删除后如果有li处于选定状态，就不要切换选项卡，否则切换到前一个选项卡 if (document.querySelector('.liactive')) return; 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]; input.value = str; input.select(); // 默认选中 input.onblur = function() { this.parentNode.innerHTML = this.value; } // 按回车也能幅值 input.onkeyup = function(e) { if (e.keyCode == 13) { this.blur(); } } } } new Tab('#tab'); 
