<main><h4>Js 面向對象 動態添加標簽頁</h4><div class="tabsbox" id="tab"><!-- tab 標簽 --><nav class="fisrstnav"><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> * {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: 0px;right: 0;display: inline-block;width: 20px;height: 20px;background-color: red;cursor: pointer; }.tabadd {position: absolute;/* width: 100px; */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;cursor: pointer; }.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; } <script type="text/javascript">//定義一個that變量，讓實例對象中的this進行賦值var that;class Tab{constructor(id){//將實力對象中的this賦值到that中that = this;//首先獲取最大父盒子的元素 , 此處的this指向實力對象//獲取需要操作的標簽this.main = document.querySelector(id);// //獲取最大父盒子中的所有li// this.lis = this.main.querySelectorAll('li');// // 獲取最大父盒子中的所有section// this.sections = this.main.querySelectorAll('section');/*動態創建li和section 可以將選擇器更換為*/// //獲取最大父盒子中的所有li// this.lis = this.main.getElementsByTagName('li');// // 獲取最大父盒子中的所有section// this.sections = this.main.getElementsByTagName('section');// 因為getElementsByTagName具有隱式遍歷的作用//獲取最大父盒子中的tabaddthis.add = this.main.querySelector('.tabadd');//獲取最大父盒子中的fisrstnav下的第一個元素標簽 （li的父元素）this.ul = this.main.querySelector('.fisrstnav ul:first-child');//獲取最大父盒子中的tabscon的元素標簽 （tabscon父元素）this.fsection = this.main.querySelector('.tabscon');// //獲取最大盒子中的icon-guanbi// this.remove = this.main.querySelectorAll('.icon-guanbi')this.init();}//設置一個初始化的函數,讓相關元素綁定事件（主要就是添加相關的綁定事件）init(){//一初始化的時候就調用新的li和section（重新調用切記寫在最前面，要不然添加時，最后一個li沒有效果）this.updateNode();//循環li,進行添加綁定事件,此處的長度設置為實例對象中的寫法//this.lis.lengthfor (var i = 0; i < this.lis.length; i++) {// 此處為了后期與section進行綁定，利用實力對象形式設置一個變量保存每次遍歷的索引this.lis[i].index = i;//會給每個li設置點擊事件//此處測試li是否已經可以點擊,拿到索引號// this.lis[i].onclick = function(){// console.log(this.index);// }//每個li設置點擊事件，觸發toggleTab的函數效果this.lis[i].onclick = this.toggleTab;//給每個icon-guanbi按鈕進行綁定事件this.remove[i].onclick = this.removeTab;//給每個span設置鼠標雙擊事件this.spans[i].ondblclick = this.editTab;//給每個sections綁定一個雙擊事件（此處因為所需要用到的方法跟span設置的事件方法一樣，所以此處直接調用span的雙擊方法）this.sections[i].ondblclick = this.editTab;}//添加事件不需要進行遍歷this.add.onclick = this.addTab;}//重新獲取所有的小li和sectionupdateNode(){//獲取最大父盒子中的所有lithis.lis = this.main.querySelectorAll('li');// 獲取最大父盒子中的所有sectionthis.sections = this.main.querySelectorAll('section');//獲取最大盒子中的icon-guanbithis.remove = this.main.querySelectorAll('.icon-guanbi')//獲取所有的li下的第一個spanthis.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')}/*****************************************************************************************************/ //1.切換功能toggleTab(){//在此處調用清楚樣式的函數,此處的this修改為that，因為this的話只能理解為li調用了此方法//其中還有sections的存在，因此用that進行包含that.clearClass();//測試li是否已經可以點擊,拿到索引號// console.log(this.index);//此處的this指向的是li這個標簽（誰調用了我，我就指向誰）this.className = 'liactive';//因為this指向的是li，li中沒有conactive這個類名屬性，所以this.sections[thsi.index] = 'conactive';// 不管用，因此可以得到此conactive為constructor（實例對象）中的元素// this.sections[thsi.index] = 'conactive';//設置一個全局變量taht,對實例對象中的this進行賦值，進行調用//因此此處的this，修改為thatthat.sections[this.index].className = 'conactive'; }//設置一個清楚樣式的函數(清除所有li和section中的類)clearClass(){for (let i = 0; i < this.lis.length; i++) {//清除li和sections下的所有類（此處用到排他思想處理）this.lis[i].className = '';//此處sections可以用that或者this,在調用方法時用that就可以了that.sections[i].className = ''; }} /*****************************************************************************************************/ //2.添加功能addTab(){//進行排他思想，讓創建的標簽類達到比較好的效果that.clearClass();//綁定測試// alert(123)//為了生成的效果好看，添加個生成隨機數var random = Math.random();//(1) 創建li元素和section元素var li = '<li class="liactive"><span>新選項卡</span><span class="iconfont icon-guanbi"></span></li>'var section = ' <section class="conactive">新內容'+ random +'</section>';//(2) 將以下的兩個元素添加到父元素中(利用insertAdjacentHTML方法進行子元素的添加，因為insertAdjacentHTML不局限于文字添加，方法中的beforeend，是將標簽等信息放在盒子里面的最后一個)//因為addTab指向的實例對對象，因此此處用thatthat.ul.insertAdjacentHTML('beforeend',li);that.fsection.insertAdjacentHTML('beforeend',section);//此處在重新調用一次init方法;that.init();}// 已經設置了 updateNode() 函數重新調用li和section的個數/*****************************************************************************************************/ //3.刪除功能//給當前函數添加事件對象(事件參數)，阻止事件冒泡行為removeTab(e){e.stopPropagation(); //利用事件參數阻止冒泡，防止出發li的點擊事件//此時會出現新增li中的刪除按鈕跟當前索引取不到一起，因此將獲取關閉按鈕的元素放到 updateNode()方法中重新獲取即可//引用父元素的索引號var index = this.parentNode.index;// 測試console.log(index);// remove() 方法則可以直接刪除指定的元素that.lis[index].remove();that.sections[index].remove();//此處調用init方法，為了讓init方法執行 updateNode() 方法，即可拿到新的元素進行遍歷使用that.init();//當我們刪除的不是選中狀態的li的時候，原來的選中狀態li保持不變//如果當前的標簽存折liactive這個標簽狀態，就直接返回值，不必執行下面的代碼if(document.querySelector('.liactive'))return;//當我們刪除了選中狀態的這個li的時候，讓它的前一個li處于選定狀態//讓index--；從而讓前一個li為選中狀態index--;//index--；于此同時自動調用lis的點擊事件，讓sections也屬于選中狀態// that.lis[index].click();//利用 && 對前后的效果進行判斷 （&& 與）that.lis[index] && that.lis[index].click();}/*****************************************************************************************************/ //4.修改功能editTab(){//先獲取原來的文本文字var str = this.innerHTML;//雙擊禁止選定文字;window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()//測試// alert(123)//使鼠標雙擊到的標簽設置為文本標簽this.innerHTML = '<input type="text" />';//獲取input標簽，將原來的文本文字賦值給inputvar input = this.children[0];input.value = str;//讓文本框內的文字處于選定狀態input.select();//當我們離開文本框，將文本框內的值設置給spaninput.onblur = function(){this.parentNode.innerHTML = this.value;};input.onkeyup = function(e){if(e.keyCode === 13){//手動調用表單失去焦點事件 不需要鼠標離開操作this.blur();} }}}//創建的實力對象必須存在實例函數的下面，不然執行結果為undeiful//首先過去最大的父盒子元素/*var a = */ new Tab('#tab');// a.init();</script>

實現效果：

總結

以上是生活随笔為你收集整理的js高级—tab栏切换（面向对象做法）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。