我们都谁知道选项卡是通过数组实现的，那么选项卡中的选项卡无非就是一个二维数组。
道理逻辑很简单，下面是我实现的一个方法：
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>
最终效果是这样的：
时间： 2024-10-13 05:52:25