- A+
所属分类：Web前端
场景：选项页
HTML：
<body> <div id="center"> <h4>tab栏</h4> <div class="tabsBox" id="tab"> <!-- tab标签 --> <nav class="fisrstNav"> <ul> <li class="liActive"><span>测试1</span><span class="icon"></span></li> <li><span>测试2</span><span class="icon"></span></li> <li><span>测试3</span><span class="icon"></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> </div> <script src="./index.js"></script> </body>CSS：
#center{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; .tabsBox{ width: 500px; height: 300px; border: 1px solid #000; .fisrstNav{ position: relative; display: flex; height: 36px; justify-content: space-between; border-bottom: 1px solid #000; ul{ display: flex; list-style: none; margin: 0; padding: 0; li{ position: relative; height: 35px; padding: 0 15px; text-align: center; line-height: 35px; border-right: 1px solid #000; overflow: hidden; .icon{ position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 9px; background-color: #000; &::after{ position: absolute; top: -7px; right: 9px; font-size: 6px; content: 'x'; color: #fff; } } } .liActive{ color: red; } } .tabadd{ position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; span{ display: block; width: 15px; height: 15px; border:1px solid #000; text-align: center; line-height: 15px; } } } .tabscon{ section{ display: none; padding: 15px; width: 100%; height: 100px; } input{ width: 80%; height: 100px; word-wrap: break-word; } .conactive{ display: block; } } } }JS：
var that; class Tab { constructor(id) { that = this; this.main = document.querySelector(id); this.ul = this.main.querySelector('.fisrstNav ul') this.tabscon = this.main.querySelector('.tabscon') this.add = document.querySelector('.tabadd'); this.init() } //初始化相关操作与元素绑定 init() { this.updataNode(); 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.spans[i].ondblclick = this.editTab; this.removeIcon[i].onclick = this.removeTab; this.sections[i].ondblclick = this.editTab; } } //更新DOM updataNode() { this.lis = this.main.querySelectorAll('li'); this.sections = this.main.querySelectorAll('section'); this.removeIcon = this.ul.querySelectorAll('.icon'); this.spans = this.main.querySelectorAll('.fisrstNav li span:first-child'); } //切换功能 toggleTab() { that.clearClass() this.className = 'liActive' that.sections[this.index].className = 'conactive' } //清除样式 clearClass() { for (let i = 0; i < that.lis.length; i++) { this.lis[i].className = ''; this.sections[i].className = ''; } } //添加功能 addTab() { that.clearClass() const li = `<li class="liActive">新选项卡<span class="icon"></span></li>`; const section = `<section class="conactive">新选项卡</section>`; // 在ul中最后插入li that.ul.insertAdjacentHTML('beforeend', li); // 在.tabscon中最后插入section that.tabscon.insertAdjacentHTML('beforeend', section); that.init(); } //删除功能 removeTab(e) { //防止冒泡 e.stopPropagation(); var index = this.parentNode.index; //根据索引删除li和section that.lis[index].remove(); that.sections[index].remove(); //判断删除是否为选中li if (document.querySelector('.liActive')) return index--; //手动调用li的点击事件 that.lis[index] && that.lis[index].click(); that.init(); } //修改功能 editTab(){ //双击禁止选中文字 // 双击禁止选中文字 const str = this.innerHTML; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); this.innerHTML = `<input type="text" />`; const input = this.children[0]; input.value = str; //文本框文字处于选中 input.select(); input.onblur = function () { this.parentNode.innerHTML = this.value; this.remove; } input.onkeyup = function (e) { if (e.keyCode === 13) { this.blur(); } } } } new Tab('#tab')新手自己学习,有什么问题请大家多多谅解
