更新時間:2021-08-17 來源:黑馬程序員 瀏覽量:
單擊小標簽右上角的按鈕可D頭刪除標簽頁。其開發(fā)思路是,為“x”元素綁定單擊事件,事件觸發(fā)后,通過父元素1i獲取索弓引值,然后用這個索引值將對應(yīng)的li和section刪除,并在刪除后更新標簽頁的選中效電下面我們們就開始進行代碼編寫。
(1)在udeatNode()方法中獲取所有的“x”元素,具體代碼如下。
updateNode (){ ......(原有代碼) this. Remove=this.main querySelectorAll('.icon-close'); }
(2) 在init()方法的for循環(huán)中,為每個“x”元素綁定單擊事件。
for(vari=0; i<this.lis.length; i++) .....(原有代碼) this . remove[i].onclick =function(e){ that romor hat. removeTab(this, e);
在上述代碼中,第4行代碼將觸發(fā)事件的對象this和事件對象e傳給removeTab0方法。
(3)編寫removeTab0事件,實現(xiàn)標簽頁的刪除,具體代碼如下。
removeTab (el,e) { e. stopPropagation(); //阻止冒泡,防止觸發(fā)li的click事件切換標簽頁 var index = el.parentNode. index; // 獲取父元素的索引 this.lis[index] . remove(); this. sections[index].remove(); this.init(); }
在上述代碼中,由于“x”元素是小標簽li元素的子元素,當“x”被單擊時,會發(fā)生冒泡,導(dǎo)致li的單擊事件也觸發(fā),所以需要通過第2行代碼阻止事件冒泡。
(4)在刪除了li和section元素以后,還需要更新標簽頁的選中狀態(tài)。有兩種情況,一種是刪除了當前正在顯示的標簽頁,刪除以后,就把上一個標簽頁設(shè)為選中狀態(tài);另-種情況是刪除了一個沒有打開的標簽頁,這個時候原來的選中狀態(tài)應(yīng)該保持不變。為了區(qū)分這兩種狀態(tài),可以在刪除了標簽頁以后,判斷當前是否存在已被打開的標簽頁,如果不存在,說明刪除的是已被打開的標簽頁,就把上- -個標簽頁設(shè)為選中狀態(tài)即可,具體代碼如下。
removeTab(el, e) { .... (原有代碼) if (!this . main. querySelector('.liactive')) { this.lis [index - 1] && this. lis[index-1] .click() ; } }在上述代碼中,第3行代碼用來判斷main元素中是否有已被打開的標簽頁,如果沒有,則執(zhí)行if中的代碼。第4行代碼用來將上一個標簽頁設(shè)為選中狀態(tài),在設(shè)置前,先判斷是否存在上一個標簽頁,以避免全部關(guān)閉的時候程序出錯。
(5)通過瀏覽器訪問測試,觀察刪除標簽頁功能是否已經(jīng)實現(xiàn)。
猜你喜歡: