JavaScript面向?qū)ο髣h除標(biāo)簽頁具體演示

單擊小標(biāo)簽右上角的按鈕可D頭刪除標(biāo)簽頁。其開發(fā)思路是，為“x”元素綁定單擊事件，事件觸發(fā)后，通過父元素1i獲取索弓引值，然后用這個索引值將對應(yīng)的li和section刪除，并在刪除后更新標(biāo)簽頁的選中效電下面我們們就開始進行代碼編寫。

(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)標(biāo)簽頁的刪除，具體代碼如下。

removeTab (el，e) {

e. stopPropagation();     //阻止冒泡，防止觸發(fā)li的click事件切換標(biāo)簽頁

var index = el.parentNode. index;  // 獲取父元素的索引

this.lis[index] . remove();

this. sections[index].remove();
this.init();
}

在上述代碼中，由于“x”元素是小標(biāo)簽li元素的子元素，當(dāng)“x”被單擊時，會發(fā)生冒泡，導(dǎo)致li的單擊事件也觸發(fā)，所以需要通過第2行代碼阻止事件冒泡。

(4)在刪除了li和section元素以后，還需要更新標(biāo)簽頁的選中狀態(tài)。有兩種情況，一種是刪除了當(dāng)前正在顯示的標(biāo)簽頁，刪除以后，就把上一個標(biāo)簽頁設(shè)為選中狀態(tài);另-種情況是刪除了一個沒有打開的標(biāo)簽頁，這個時候原來的選中狀態(tài)應(yīng)該保持不變。為了區(qū)分這兩種狀態(tài)，可以在刪除了標(biāo)簽頁以后，判斷當(dāng)前是否存在已被打開的標(biāo)簽頁，如果不存在，說明刪除的是已被打開的標(biāo)簽頁，就把上- -個標(biāo)簽頁設(shè)為選中狀態(tài)即可，具體代碼如下。

 removeTab(el, e) {

      .... (原有代碼)

if (!this . main. querySelector('.liactive'))  {

this.lis [index - 1] && this. lis[index-1] .click() ;
  }
}

在上述代碼中，第3行代碼用來判斷main元素中是否有已被打開的標(biāo)簽頁，如果沒有，則執(zhí)行if中的代碼。第4行代碼用來將上一個標(biāo)簽頁設(shè)為選中狀態(tài)，在設(shè)置前，先判斷是否存在上一個標(biāo)簽頁，以避免全部關(guān)閉的時候程序出錯。

(5)通過瀏覽器訪問測試，觀察刪除標(biāo)簽頁功能是否已經(jīng)實現(xiàn)。

猜你喜歡：

article標(biāo)簽是什么元素？有什么作用？

怎樣使用H5頭部標(biāo)簽？具體代碼演示

表格標(biāo)簽的特點，如何在HTML網(wǎng)頁中創(chuàng)建表格？

傳智教育web前端培訓(xùn)課程