首页 > 代码库 > 介绍下京东的（选项卡中的选项卡）是怎么实现的

介绍下京东的（选项卡中的选项卡）是怎么实现的

2024-09-19 13:25:49   215人阅读

我们都谁知道选项卡是通过数组实现的，那么选项卡中的选项卡无非就是一个二维数组。

道理逻辑很简单，下面是我实现的一个方法：

  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 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>

最终效果是这样的：

技术分享

介绍下京东的（选项卡中的选项卡）是怎么实现的


联系
我们