介绍下京东的（选项卡中的选项卡）是怎么实现的
Posted 冰封ice
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了介绍下京东的（选项卡中的选项卡）是怎么实现的相关的知识，希望对你有一定的参考价值。
我们都谁知道选项卡是通过数组实现的，那么选项卡中的选项卡无非就是一个二维数组。
道理逻辑很简单，下面是我实现的一个方法：
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; 19 margin: 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选项卡中的顺风选项卡未按预期工作