介紹下京東的（選項卡中的選項卡）是怎麽實現的
阿新 • • 發佈：2017-05-05
pad b- cti pre set red 二維數組 node int
我們都誰知道選項卡是通過數組實現的，那麽選項卡中的選項卡無非就是一個二維數組。
道理邏輯很簡單，下面是我實現的一個方法：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>選項卡嵌套選項卡</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 /*border: 1px solid red;*/ 11 } 12 li{ 13 list-style: none; 14 } 15 .tab-wrap{ 16 width: 1004px; 17 height: 500px; 18 border: none; 19margin: 50px auto; 20 overflow: hidden; 21 } 22 .tab-title{ 23 width: 200px; 24 height: 100%; 25 float: left; 26 } 27 .tab-content{ 28 width: 800px; 29 height: 100%; 30 float: left; 31 position: relative; 32 } 33 .tab-title ul{ 34 width: 100%; 35 height: 100%; 36 } 37 .tab-title ul li{ 38 display: block; 39 width: 100%; 40 /*height: 125px;*/ 41 font-size: 20px; 42 text-align: center; 43 cursor: pointer; 44 line-height: 125px; 45 border-bottom: 1px dashed #909090; 46 } 47 .tab-title ul li:last-child{ 48 border-bottom: none; 49 } 50 .tab-title ul .active{ 51 background: #F55A00; 52 } 53 .tab-content-showImage{ 54 width: 100%; 55 height: 100%; 56 } 57 .tab-content-subtitle{ 58 position: absolute; 59 left: 0px; 60 bottom: 0px; 61 background: white; 62 filter(alpha: 80); 63 opacity: 0.8; 64 } 65 .tab-content-subtitle li{ 66 display: inline-block; 67 height: 50px; 68 border: 1px solid lightblue; 69 text-align: center; 70 line-height: 50px; 71 color: black; 72 cursor: pointer; 73 } 74 .tab-content-subtitle .active{ 75 background: red; 76 } 77 </style> 78 </head> 79 <body> 80 <!--創建容器--> 81 <div class="tab-wrap" id="tab"> 82 <div class="tab-title"> 83 <ul></ul> 84 </div> 85 <div class="tab-content"> 86 <img class="tab-content-showImage" /> 87 <ul class="tab-content-subtitle"></ul> 88 </div> 89 </div> 90 </body> 91 <script type="text/javascript"> 92 window.onload = function(){ 93 var tab = document.getElementById(‘tab‘); 94 var tabTitle = document.getElementsByClassName(‘tab-title‘)[0]; 95 var tabTitlelist = tabTitle.getElementsByTagName(‘ul‘)[0]; 96 var tabContent = document.getElementsByClassName(‘tab-content‘)[0]; 97 var showImage = document.getElementsByClassName(‘tab-content-showImage‘)[0]; 98 var subtitle = document.getElementsByClassName(‘tab-content-subtitle‘)[0]; 99 var arr = [ 100 { 101 "title":‘標題1‘, 102 "subtitle":[‘小標題1‘,‘小標題2‘,‘小標題3‘], 103 "pic":[‘../img/timg (1).jpg‘, ‘../img/timg (2).jpg‘, ‘../img/timg (3).jpg‘] 104 }, 105 { 106 "title":‘標題2‘, 107 "subtitle":[‘小標題1‘,‘小標題2‘,‘小標題3‘,‘小標題4‘], 108 "pic":[‘../img/timg (4).jpg‘, ‘../img/timg (5).jpg‘, ‘../img/timg (2).jpg‘, ‘../img/timg (1).jpg‘] 109 }, 110 { 111 "title":‘標題3‘, 112 "subtitle":[‘小標題1‘,‘小標題2‘,‘小標題3‘,‘小標題4‘,‘小標題5‘], 113 "pic":[‘../img/timg (2).jpg‘, ‘../img/timg (5).jpg‘, ‘../img/timg (3).jpg‘, ‘../img/timg (1).jpg‘,‘../img/timg (4).jpg‘] 114 }, 115 { 116 "title":‘標題4‘, 117 "subtitle":[‘小標題1‘,‘小標題2‘,‘小標題3‘], 118 "pic":[‘../img/timg (1).jpg‘, ‘../img/timg (2).jpg‘, ‘../img/timg (3).jpg‘] 119 } 120 ]; 121 122 for(var i = 0; i < arr.length; i++){ 123 var oLi = document.createElement(‘li‘); 124 oLi.innerHTML = arr[i].title; 125 oLi.style.height = Math.floor(parseInt(500/arr.length) - 1) + ‘px‘; 126 oLi.index = i; 127 if(i == 0){ 128 oLi.className = ‘active‘; 129 changeTab(0); 130 // break; 131 } 132 oLi.onclick = function(){ 133 highLight(this); 134 subtitle.innerHTML = ‘‘; 135 changeTab(this.index); 136 } 137 tabTitlelist.appendChild(oLi); 138 } 139 140 // changeTab(0); 141 142 function changeTab(num){ 143 144 showImage.src = arr[num].pic[0]; 145 146 147 for(var j = 0; j < arr[num].subtitle.length; j++){ 148 var aLi = document.createElement(‘li‘); 149 aLi.innerHTML = arr[num].subtitle[j]; 150 aLi.style.width = Math.floor(parseInt(800/arr[num].subtitle.length) - 2) + ‘px‘; 151 aLi.index = j; 152 if(j == 0){ 153 aLi.className = ‘active‘; 154 } 155 aLi.onmouseover = function(){ 156 highLight(this); 157 this.parentNode.previousElementSibling.src = arr[num].pic[this.index]; 158 } 159 subtitle.appendChild(aLi); 160 } 161 } 162 163 function highLight(ele) { 164 var aLi = ele.parentNode.children; 165 for(var i = 0; i < aLi.length; i++) { 166 aLi[i].className = ‘‘; 167 } 168 ele.className = ‘active‘; 169 } 170 } 171 </script> 172 </html>
最終效果是這樣的：
介紹下京東的（選項卡中的選項卡）是怎麽實現的