需求： 演示效果如下：
1.完成所有的布局樣式和排版
2.使用js完成所有的功能包括以下
3.完成標簽的增加和刪除
4.完成標簽和內容的對應顯示
5.完成標簽和內容的修改
相關布局樣式：
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>js面向對象 動態添加標簽頁</title> 8 <link rel="stylesheet" href="./index.css"> 9 <link rel="stylesheet" href="./css/iconfont.css"> 10 </head> 11 12 <body> 13 <main> 14 <h4>js面向對象 動態添加標簽頁</h4> 15 <h6>css所用時間：30分鍾到40分鍾 -------js完成時間是根據看視頻</h6> 16 <div class="tabsbox" id="tab"> 17 <!--tab標簽 --> 18 <nav class="fisrstnav"> 19 <ul> 20 <li class="liactive"><span>測試1</span><span class="iconfont icon-guanbi "></span></li> 21 <li><span>測試2</span> <span class="iconfont icon-guanbi "></span></li> 22 <li><span>測試3</span><span class="iconfont icon-guanbi "></span></li> 23 </ul> 24 <div class="tabadd"> 25 <span>+</span> 26 </div> 27 </nav> 28 <!-- tab內容 --> 29 <div class="tabscon"> 30 <section class="conactive">測試1</section> 31 <section>測試2</section> 32 <section>測試3</section> 33 </div> 34 </div> 35 36 37 </main> 38 <!--頁面最下面使用js --> 39 <script src="./js/tab.js"></script> 40 </body> 41 42 </html>
完成需要的css和js
答案：
css:
1 body, 2 ul { 3 list-style: none; 4 /*清除列表默認樣式*/ 5 padding: 0; 6 /*清除padding*/ 7 margin: 0; 8 } 9 10 main { 11 position: relative; 12 } 13 14 /*標題樣式*/ 15 h4 { 16 margin: 50px 10px auto; 17 font-size: 24px; 18 text-align: center; 19 20 } 21 22 h6 { 23 font-size: 15px; 24 text-align: center; 25 } 26 27 /*設置外邊框*/ 28 .tabsbox { 29 margin: 0 auto; 30 width: 70%; 31 height: 410px; 32 border: 1px solid #FFE0D5; 33 } 34 35 /*設置頭部區域*/ 36 .fisrstnav { 37 border-bottom: 1px solid #E9E0EB; 38 height: 50px; 39 } 40 41 ul { 42 float: left; 43 } 44 45 li { 46 position: relative; 47 text-align: center; 48 line-height: 50px; 49 width: 110px; 50 height: 50px; 51 float: left; 52 border-right: 1px solid #E9E0EB; 53 list-style-type: none; 54 } 55 56 /*設置加號按鈕區域*/ 57 .tabadd { 58 float: right; 59 line-height: 22px; 60 text-align: center; 61 margin-top: 10px; 62 margin-right: 10px; 63 width: 22px; 64 height: 22px; 65 border: 1px solid #E9E0EB; 66 } 67 68 /*設置內容區域*/ 69 .tabscon { 70 margin: 33px; 71 } 72 73 /*先設置隱藏*/ 74 section { 75 display: none; 76 } 77 78 /*在設置顯示*/ 79 .conactive { 80 display: block; 81 } 82 83 84 /** 85 組件激活樣式 86 */ 87 .liactive { 88 border-bottom: 1px solid white; 89 } 90 91 /*設置外部引入*/ 92 .iconfont { 93 position: absolute; 94 top: 0; 95 right: 0; 96 width: 20px; 97 height: 20px; 98 line-height: 20px; 99 background: black; 100 color: white; 101 font-size: 1px !important; 102 border-radius: 0 0 0 30px; 103 }
js:
1 var that; 2 3 class Tab { 4 constructor(id) { 5 // 獲取元素 6 that = this; 7 this.main = document.querySelector(id) 8 // 獲取加號 9 this.add = this.main.querySelector(".tabadd"); 10 // 獲取li的父元素 11 this.ul = this.main.querySelector(".fisrstnav ul:first-child") 12 // 獲取內容的父元素 13 this.asection = this.main.querySelector('.tabscon') 14 this.init() 15 } 16 // 獲取所有的li元素 17 updateNode() { 18 // 獲取li標簽 19 this.lis = this.main.querySelectorAll('li') 20 // 獲取內容標簽 21 this.sections = this.main.querySelectorAll('section') 22 // 獲取刪除按鈕 23 this.remove = this.main.querySelectorAll('.icon-guanbi'); 24 this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child') 25 } 26 init() { 27 this.updateNode() 28 // 幫定添加事件 29 this.add.onclick = this.addTab; 30 // init 初始化操作讓相關的元素綁定 31 for (var i = 0; i < this.lis.length; i++) { 32 this.lis[i].index = i; 33 // 給每一個li添加一個事件 34 this.lis[i].onclick = this.toggleTab; 35 // 添加刪除按鈕事件 36 this.remove[i].onclick = this.removeTab; 37 // 添加spsn事件 38 this.spans[i].ondblclick = this.editTab; 39 // 內容標簽 40 this.sections[i].ondblclick = this.ediSect; 41 42 } 43 } 44 // 1。切換gongn 45 toggleTab() { 46 // 先清除樣式 47 that.clearClass() 48 // 然后添加樣式 49 this.className = 'liactive'; 50 that.sections[this.index].className = "conactive" 51 } 52 // 添加功能 53 addTab() { 54 // 先清除樣式 55 that.clearClass() 56 // 生成隨機數 57 var random = Math.random() 58 // 創建li元素和section元素 59 var li = ' <li class="liactive"><span>新增</span><span class="iconfont icon-guanbi "></span></li>'; 60 var section = ' <section class="conactive">測試' + random + '</section>' 61 // 追加到對應的位置 62 that.ul.insertAdjacentHTML('beforeend', li) 63 that.asection.insertAdjacentHTML('beforeend', section) 64 that.init() 65 66 } 67 // 刪除功能 68 removeTab(e) { 69 e.stopPropagation(); //防止冒泡 70 var index = this.parentNode.index 71 // 根據索引刪除對應的li 和asection remove()方法可以直接刪除對應的元素 72 that.lis[index].remove() 73 that.sections[index].remove() 74 that.init() 75 // 刪除后直接進入前一個 76 index--; 77 // 直接不用手動點擊實現點擊事件 78 that.lis[index] && that.lis[index].click(); 79 that.sections[index] && that.sections[index].click(); 80 } 81 // 修改標簽 82 editTab() { 83 // 先獲取框中的文字 84 var str = this.innerHTML; 85 // 雙擊禁止選中文字 86 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 87 // 添加一個文本框 88 this.innerHTML = ' <input type="text" style="width:70px ;">' 89 var input = this.children[0]; 90 input.value = str 91 input.select(); 92 // 離開文本框在復制回去 93 input.onblur = function () { 94 this.parentNode.innerHTML = this.value 95 } 96 97 98 } 99 // 清除樣式 100 clearClass() { 101 for (var i = 0; i < this.lis.length; i++) { 102 this.lis[i].className = '' 103 this.sections[i].className = '' 104 } 105 } 106 // 修改內容 107 ediSect() { 108 // 先獲取框中的文字 109 var str = this.innerHTML; 110 // 雙擊禁止選中文字 111 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 112 // 添加一個文本框 113 this.innerHTML = ' <input type="text" style="width:900px; height: 270px;">' 114 var input = this.children[0]; 115 input.value = str 116 input.select(); 117 // 離開文本框在復制回去 118 input.onblur = function () { 119 this.parentNode.innerHTML = this.value 120 } 121 } 122 } 123 new Tab('#tab')