JavaScript面向?qū)ο笤鯓觿h除標(biāo)簽頁？

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

(1)在udeatNode()方法中獲取所有的“x”元素，具體代碼如下。

updateNode (){

......(原有代碼)

this. Remove=this.main querySelectorAll('.icon-close');
}

(2) 在init()方法的for循環(huán)中，為每個(gè)“x”元素綁定單擊事件。

 for(vari=0; i<this.lis.length; i++)

.....(原有代碼)

this . remove[i].onclick =function(e){

that romor

hat. removeTab(this, e);

在上述代碼中，第4行代碼將觸發(fā)事件的對(duì)象this和事件對(duì)象e傳給removeTab0方法。

（3）編寫removeTab0事件，實(shí)現(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”被單擊時(shí)，會(huì)發(fā)生冒泡，導(dǎo)致li的單擊事件也觸發(fā)，所以需要通過第2行代碼阻止事件冒泡。

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

 removeTab(el, e) {

      .... (原有代碼)

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

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

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

猜你喜歡：

javascript的垃圾回收機(jī)制指的是什么?

3種JavaScript代碼書寫位置和注意事項(xiàng) ?

HTML網(wǎng)頁格式化：標(biāo)題標(biāo)簽、段落標(biāo)簽和水平標(biāo)簽

怎樣對(duì)網(wǎng)頁標(biāo)簽進(jìn)行精準(zhǔn)定位？【web前端】

黑馬程序員web前端培訓(xùn)課程