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

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

更新時(shí)間:2021-08-17 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

removeTab (el,e) {

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

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ā),所以需要通過(guò)第2行代碼阻止事件冒泡。

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


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

 removeTab(el, e) {

      .... (原有代碼)

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

this.lis [index - 1] && this. lis[index-1] .click() ;
  }
}
在上述代碼中,第3行代碼用來(lái)判斷main元素中是否有已被打開(kāi)的標(biāo)簽頁(yè),如果沒(méi)有,則執(zhí)行if中的代碼。第4行代碼用來(lái)將上一個(gè)標(biāo)簽頁(yè)設(shè)為選中狀態(tài),在設(shè)置前,先判斷是否存在上一個(gè)標(biāo)簽頁(yè),以避免全部關(guān)閉的時(shí)候程序出錯(cuò)。


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






猜你喜歡:

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

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

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

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

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

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!