欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實現(xiàn)Tab欄切換功能詳解

 更新時間：2022年10月24日 09:17:13   作者：YinJie…  
這篇文章主要介紹了JavaScript實現(xiàn)Tab欄切換的實現(xiàn)方式,是面向對象的寫法，本文給大家分享詳細案例代碼，需要的朋友可以參考下

1.實現(xiàn)效果

2.功能需求

  • 點擊tab欄,可以切換效果.
  • 點擊+號,可以添加tab項和內容項.
  • 點擊x號,可以刪除當前的tab項和內容項
  • 雙擊tab項文字或者內容項文字，可以修改里面的文字內容.

3.抽象對象

抽象對象：Tab對象

  • 該對象具有切換功能
  • 該對象具有添加功能
  • 該對象具有刪除功能
  • 該對象具有修改功能

4.切換功能實現(xiàn)

首先把大家可以先看看html結構，防止獲取元素和類名的時候不知道獲取的是什么：

<h4>
     Js 面向對象 動態(tài)添加標簽頁
</h4>
<div class="tabsbox" id="tab">
      <!-- tab 標簽 -->
      <nav class="fisrstnav">
           <ul>
               <li class="liactive"><span>測試1</span><span class="iconfont icon-guanbi"></span></li>
               <li><span>測試2</span><span class="iconfont icon-guanbi"></span></li>
               <li><span>測試3</span><span class="iconfont icon-guanbi"></span></li>
           </ul>
           <div class="tabadd">
               <span>+</span>
           </div>
       </nav>
       <!-- tab 內容 -->
       <div class="tabscon">
           <section class="conactive">測試1</section>
           <section>測試2</section>
           <section>測試3</section>
       </div>
</div>

在這一節(jié)里我們要實現(xiàn)的效果：

示例代碼：

var that;
class tab{
    constructor(id){
        //獲取元素
        that = this;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.init();//自動調用init
    }
    init(){
        //init初始化操作讓相關元素綁定事件
        for(let i = 0;i<this.lis.length;i++){
            this.lis[i].setAttribute('index',i);//設置索引值
            this.lis[i].onclick = this.toggleTab;
        }
    }
    toggleTab() {
        //clearClass函數(shù)是類的公共函數(shù)，所有只能通過that調用
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.getAttribute('index')].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
}
var newtab = new tab('.tabsbox');

在construcotr里我們要獲取相關元素，這里一定要注意this的問題，必須要加this，因為this指向的就是實例化對象。在獲取元素后調用init函數(shù)，init函數(shù)就是用來給元素綁定事件的，比如在頁面刷新時tab欄就有了切換添加這些功能，所以要把init函數(shù)放在construcotr里。設置索引值是為了在點擊tab欄的時候，底下的內容區(qū)域也可能夠同樣變化。

注意：toggleTab()里調用clearClass時是that，而不是this。因為this指向的是調用函數(shù)的人，這里指的是li，因為在點擊了li時才會調用切換函數(shù)。但是li里面沒有clearClass方法，所以應該用that,that在這里指向的是實例化對象

5.添加功能實現(xiàn)

1.點擊+可以實現(xiàn)添加新的選項卡和內容

2.第一步:創(chuàng)建新的選項卡li和新的內容section

3.第二步:把創(chuàng)建的兩個元素追加到對應的父元素中.

4.利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中

這里簡單介紹一下insertAdjacentHTML()的語法：

position是相對于元素的位置,并且必須是以下字符串之一:

'beforebegin' 元素自身的前面。

'afterbegin' 插入元素內部的第一個子節(jié)點之前。

'beforeend' 插入元素內部的最后-個子節(jié)點之后。

'afterend' 元素自身的后面。

text是要被解析為HTML或XML，并插入到DOM樹中的字符串。

首先我們在construcor里面獲取元素：

this.add = this.main.querySelector('.tabadd');
this.ul = this.main.querySelector('.fisrstnav ul');
this.fsection = this.main.querySelector('.tabscon');

然后在init初始化函數(shù)里給添加按鈕綁定事件：

this.add.onclick = this.addTab;

最后創(chuàng)建添加函數(shù)addTab():

addTab() {
    that.clearClass();
    var random = Math.random();
    var li = '<li class="liactive"><span>新選項卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">測試'+ random +'</section>';
    that.ul.insertAdjacentHTML('beforeend',li);
    that.fsection.insertAdjacentHTML('beforeend',section);
}

在添加函數(shù)的開頭，要先調用clearClass清除原先的樣式，讓新添加的選項卡為選中狀態(tài)，我們先看一下效果：

為什么新添加的選項卡不能切換，并且以前的li和section沒有清除掉類，這是為什么呢?

因為這是我們后來添加的，我們在獲取元素的時候是頁面加載的時候，后來添加的也就沒有被獲取元素，所以也就沒有綁定點擊事件，就會有這些bug。

所以我們應該在點擊加號按鈕之后，應該重新獲取一下所有的li和section，那么我們新建一個更新函數(shù)updateNode()，把construcotr里面獲取li和section的部分放進去，當我們每次點擊添加按鈕的時候都再獲取一次所有l(wèi)i和section這樣bug就解決了

updateNode() {
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
}

并且在init開頭加上這一句：

this.updateNode();

再在addTab最后加上這句：

that.init();

這樣我們每次添加一個新的選項卡和內容時，都會重新獲取并且給新添加的綁定事件。

實現(xiàn)效果：

6.刪除功能實現(xiàn)

  • 點擊x號可以刪除當前的Ii選項卡和當前的section
  • x號是沒有索引號的,但是它的父親li有索引號,這個索引號正是我們想要的索引號
  • 所以核心思路是:點擊x號可以刪除這個索引號對應的Ii和section

首先我們要獲取所有的關閉按鈕，那我們應該把獲取元素的操作放在construcor里還是updateNode里面呢？

事實上我們必須把獲取關閉按鈕的步驟放在updateNode里，因為li和關閉按鈕是一一對應的，當新添加一個選項卡時，關閉按鈕的數(shù)量也需要更新

那么我們把這一句放在updateNode里面：

this.remove = this.main.querySelectorAll('.icon-guanbi');

并且在init的for循環(huán)里添加點擊事件，removeTab就是刪除方法：

this.remove[i].onclick = this.removeTab;

我們新建一個刪除函數(shù)removeTab():

removeTab(e) {
    e.stopPropagation();//阻止冒泡 防止觸發(fā)他的父親li的切換點擊事件
    var index = this.parentNode.getAttribute('index');
    that.lis[index].remove();
    that.fsection[index].remove();
    that.init();
}

在函數(shù)里首先我們得阻止冒泡，因為點擊x號時如果有冒泡也會觸發(fā)他的父親li的點擊事件。然后我們拿到對應的li的索引號，通過remove方法刪除對應的li和section，然后再次獲取最新的li和section。

實現(xiàn)效果：

我們在刪除了選中狀態(tài)的這個li的時候，應該讓他的前一個li處于選定狀態(tài)

我們在removeTab里再添加下面兩句：

index--;
that.lis[index] && that.lis[index].click();

因為我們刪除了當前的li,想讓前一個li處于選定狀態(tài)，那就得讓索引號減一，下面這個&&語句的意思就是。如果當前的li是最后一個，也就是index為0時，那么index--就是負一，這樣that.lis[index]就為假就不會執(zhí)行后面這個語句。后面這句就是手動調用點擊事件，這樣前一個li就處于選定狀態(tài)了。

我們還有最后一個功能，就是當刪除的不是選中狀態(tài)的li的時候，原來的選中狀態(tài)li保持不變就行

我們只需要加上這一句在index--之前：

if(document.querySelector('.liactive')) return;

如果我們刪除的不是選中狀態(tài)的li的時候，就說明有.liactive這個類，那么直接return就不會執(zhí)行下面的代碼了。要是刪除的就是選中狀態(tài)的li，那就不存在.liactive類就執(zhí)行下面的代碼

實現(xiàn)效果：

這里修改功能就不進行說明了，下面是源碼鏈接：傳送門

到此這篇關于JavaScript實現(xiàn)Tab欄切換功能詳解的文章就介紹到這了,更多相關JS Tab欄切換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論