面向物件版tab 欄切換

阿新 • • 發佈：2020-10-11

1、功能需求

點選 tab欄,可以切換效果.
點選 + 號, 可以新增 tab 項和內容項.
點選 x 號, 可以刪除當前的tab項和內容項.
雙擊tab項文字或者內容項文字可以修改裡面的文字內容

抽象物件: Tab物件

該物件具有切換功能
該物件具有新增功能
該物件具有刪除功能
該物件具有修改功能

2、案例準備

獲取到標題元素
獲取到內容元素
獲取到刪除的小按鈕 x號
新建js檔案,定義類,新增需要的屬性方法(切換,刪除,增加,修改)
時刻注意this的指向問題

3、切換

為獲取到的標題繫結點選事件,展示對應的內容區域,儲存對應的索引
```
 this.lis[i].index = i;
 this.lis[i].onclick = this.toggleTab;
```

使用排他,實現只有一個元素的顯示

 toggleTab() {
  //將所有的標題與內容類樣式全部移除
   for (var i = 0; i < this.lis.length; i++) {
   this.lis[i].className = '';
   this.sections[i].className = '';
   }
  //為當前的標題新增啟用樣式
   this.className = 'liactive';
  //為當前的內容新增啟用樣式
   that.sections[this.index].className = 'conactive';
  }

4、新增

MDN Web文件：https://developer.mozilla.org 查詢insertAdjacentHTML用法

點選+可以實現新增新的選項卡和內容
一步:建立新的選項卡li和新的內容section
第二步:把建立的兩個元素追加到對應的父元素中.
以前的做法:動態建立元素createElement ,但是元素裡面內容較多,需要innerHTML賦值在appendChild 追加到父元素裡面.
現在高階做法:利用insertAdjacentHTML()可以直接把字串格式元素新增到父元素中
appendChild不支援追加字串的子元素, insertAdjacentHTML支援追加字串的元素

為新增按鈕+ 繫結點選事件
```
 this.add.onclick = this.addTab;
```

實現標題與內容的新增,做好排他處理

addTab() {
  that.clearClass();
  // (1) 建立li元素和section元素 
  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>';
  // (2) 把這兩個元素追加到對應的父元素裡面
  that.ul.insertAdjacentHTML('beforeend', li);
  that.fsection.insertAdjacentHTML('beforeend', section);
  that.init();
   }

5、刪除

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

為元素的刪除按鈕x繫結點選事件

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

獲取到點選的刪除按鈕的所在的父元素的所有,刪除對應的標題與內容

 removeTab(e) {
   e.stopPropagation(); // 阻止冒泡 防止觸發li 的切換點選事件
   var index = this.parentNode.index;
   console.log(index);
   // 根據索引號刪除對應的li 和section  remove()方法可以直接刪除指定的元素
   that.lis[index].remove();
   that.sections[index].remove();
   that.init();
   // 當我們刪除的不是選中狀態的li 的時候,原來的選中狀態li保持不變
   if (document.querySelector('.liactive')) return;
   // 當我們刪除了選中狀態的這個li 的時候, 讓它的前一個li 處於選定狀態
   index--;
   // 手動呼叫我們的點選事件  不需要滑鼠觸發
   that.lis[index] && that.lis[index].click();
 }

6、編輯

雙擊選項卡li或者section裡面的文字可以實現修改功能
雙擊事件是: ondblclick
如果雙擊文字，會預設選定文字,此時需要雙擊禁止選中文字
window.getSelection? window.getSelection().removeAllRanges(): document.selection.empty();
核心思路：雙擊文字的時候，在裡面生成一個文字框當失去焦點或者按下回車然後把文字框輸入的值給原先元素即可.

為元素(標題與內容)繫結雙擊事件

 this.spans[i].ondblclick = this.editTab;
 this.sections[i].ondblclick = this.editTab;

在雙擊事件處理文字選中狀態,修改內部DOM節點,實現新舊value值的傳遞

editTab() {
  var str = this.innerHTML;
  // 雙擊禁止選定文字
  window.getSelection ? window.getSelection().removeAllRanges() :                   document.selection.empty();
  // alert(11);
   this.innerHTML = '<input type="text" />';
   var input = this.children[0];
   input.value = str;
   input.select(); // 文字框裡面的文字處於選定狀態
   // 當我們離開文字框就把文字框裡面的值給span 
   input.onblur = function() {
   this.parentNode.innerHTML = this.value;
    };
   // 按下回車也可以把文字框裡面的值給span
   input.onkeyup = function(e) {
   if (e.keyCode === 13) {
   // 手動呼叫表單失去焦點事件  不需要滑鼠離開操作
   this.blur();
    }
   }
}