注意：
// 雙擊禁止選定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>面向對象 Tab</title> <link rel="stylesheet" href="./styles/tab.css"> <link rel="stylesheet" href="./styles/style.css"> <script src="js/jquery.min.js"></script> </head> <body> <main> <h4> Js 面向對象 動態添加標簽頁 </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> </main> <script src="js/index.js"></script> </body> </html>
var that; class Tab { constructor(id) { // 獲取對象 that = this; this.main = document.querySelector(id); // li的父元素 this.ul = this.main.querySelector(".fisrstnav ul:first-child"); // section 父元素 this.fsection = this.main.querySelector(".tabscon") this.tabadd = this.main.querySelector(".tabadd") this.init() } // init 初始化操作讓相關的元素綁定事件 init() { // 初始化的時候需要獲取更新后的數據 this.updataEle() this.tabadd.onclick = this.addTab; for (var i = 0; i < this.lis.length; i++) { this.lis[i].index = i; this.lis[i].onclick = this.toggleTab; this.closecons[i].onclick = this.removeTab; this.spans[i].ondblclick = this.editTab; this.sections[i].ondblclick = this.editTab; } } // 因為我們動態添加元素 需要從新獲取對應的元素 updataEle() { this.lis = this.ul.querySelectorAll("li"); this.sections = this.fsection.querySelectorAll("section") this.closecons = this.main.querySelectorAll(".icon-guanbi"); this.spans = this.main.querySelectorAll(".fisrstnav li span:first-child") } // 切換功能 toggleTab() { that.clearCurrent(); this.className = "liactive"; var index = this.index; that.sections[index].className = "conactive"; } // 清除樣式表,調用了2次,單獨寫出來提高效率 clearCurrent() { for (var i = 0; i < that.lis.length; i++) { this.lis[i].className = ""; this.sections[i].className = ""; } } // 添加列表 addTab() { that.clearCurrent() var i = Math.random(); // 主要添加新li，默認是選中狀態 var li = '<li class="liactive"><span>新選項卡</span><span class="iconfont icon-guanbi"></span></li>' var section = "<section class='conactive'>" + i + "</section>" // 這個是添加內容新語法，很好用哦 that.ul.insertAdjacentHTML("beforeEnd", li); that.fsection.insertAdjacentHTML("beforeEnd", section); // 添加完之后還需要初始化一下，方便給新增加的元素加方法 that.init(); } removeTab(e) { // 防止點刪除間的時候產生父元素切換，冒泡現象 e.stopPropagation(); var index = this.parentNode.index; // 刪除2項 this.parentNode.remove(); that.sections[index].remove(); that.init(); // 刪除完后需要默認選中 if (document.querySelector(".liactive")) { return } index--; // 利用邏輯與的關系 that.lis[index] && that.lis[index].click(); } editTab() { var text = this.innerHTML; // 雙擊禁止選中 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); this.innerHTML = '<input type="text">' var input = this.children[0]; input.value = text; input.select(); input.onblur = function() { var text = this.value; this.parentNode.innerHTML = text; } input.onkeyup = function(e) { if (e.keyCode === 13) { this.onblur() } } } } tab = new Tab("#tab")