首頁技術(shù)文章正文

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

更新時間:2021-08-17 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

單擊小標(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行代碼阻止事件冒泡。

1629171917747_刪除標(biāo)簽頁.jpg


(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)。






猜你喜歡:

javascript的垃圾回收機制指的是什么?

3種JavaScript代碼書寫位置和注意事項 ?

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

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!