常见选项卡内容切换+折叠+展开效果实现
1.选项卡效果预览
2.源码与简要说明
<!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>切换选项卡功能实现</title>
6 <link rel="stylesheet" href="css/switchTab.css" />
7 </head>
8 <body>
9 <div class="nav-tab">
10 <ul class="main-tab" id="nav-tab">
11 <li class="active" index="0">
12 <a href="#none"><p>星期一</p><p>11-07</p></a>
13 </li>
14 <li index="1"><a href="#none"><p>星期二</p><p>11-08</p></a></li>
15 <li index="2"><a href="#none"><p>星期三</p><p>11-09</p></a></li>
16 <li index="3"><a href="#none"><p>星期四</p><p>11-10</p></a></li>
17 <li index="4"><a href="#none"><p>星期五</p><p>11-11</p></a></li>
18 <li index="5"><a href="#none"><p>星期六</p><p>11-12</p></a></li>
19 <li index="6"><a href="#none"><p>星期日</p><p>11-13</p></a></a></li>
20 </ul>
21 </div>
22 <div class="tab-content">
23 <div class="table-div" style="display: block;" tab-index="0">
24 <table cellpadding="0" cellspacing="0" border="0" class="table">
25 <colgroup>
26 <col align="left" width="40%"/>
27 <col align="left" width="30%"/>
28 <col align="right" width="30%"/>
29 </colgroup>
30 <thead>
31 <tr>
32 <td>播出频道</td>
33 <td>时间</td>
34 <td>节目</td>
35 </tr>
36 </thead>
37 <tbody>
38 <tr>
39 <td>安徽卫视</td>
40 <td>2016/11/07</td>
41 <td>天气预报</td>
42 </tr>
43 <tr>
44 <td>CCTV</td>
45 <td>2016/11/07</td>
46 <td>天气预报</td>
47 </tr>
48 <tr>
49 <td>广东卫视</td>
50 <td>2016/11/07</td>
51 <td>天气预报</td>
52 </tr>
53 <tr>
54 <td>甘肃卫视</td>
55 <td>2016/11/07</td>
56 <td>天气预报</td>
57 </tr>
58 </tbody>
59 </table>
60 </div>
61 <div class="table-div" style="display: none;" tab-index="0">
62 <table cellpadding="0" cellspacing="0" border="0" class="table">
63 <colgroup>
64 <col align="left" width="40%"/>
65 <col align="left" width="30%"/>
66 <col align="right" width="30%"/>
67 </colgroup>
68 <thead>
69 <tr>
70 <td>播出频道</td>
71 <td>时间</td>
72 <td>节目</td>
73 </tr>
74 </thead>
75 <tbody>
76 <tr>
77 <td>安徽卫视</td>
78 <td>2016/11/07</td>
79 <td>天气预报</td>
80 </tr>
81 <tr>
82 <td>CCTV</td>
83 <td>2016/11/07</td>
84 <td>天气预报</td>
85 </tr>
86 <tr>
87 <td>广东卫视</td>
88 <td>2016/11/07</td>
89 <td>天气预报</td>
90 </tr>
91 <tr>
92 <td>甘肃卫视</td>
93 <td>2016/11/07</td>
94 <td>天气预报</td>
95 </tr>
96 </tbody>
97 </table>
98 </div>
99 <div class="table-div" style="display: none;" tab-index="0">
100 <table cellpadding="0" cellspacing="0" border="0" class="table">
101 <colgroup>
102 <col align="left" width="40%"/>
103 <col align="left" width="30%"/>
104 <col align="right" width="30%"/>
105 </colgroup>
106 <thead>
107 <tr>
108 <td>播出频道</td>
109 <td>时间</td>
110 <td>节目</td>
111 </tr>
112 </thead>
113 <tbody>
114 <tr>
115 <td>安徽卫视</td>
116 <td>2016/11/07</td>
117 <td>天气预报</td>
118 </tr>
119 <tr>
120 <td>CCTV</td>
121 <td>2016/11/07</td>
122 <td>天气预报</td>
123 </tr>
124 <tr>
125 <td>广东卫视</td>
126 <td>2016/11/07</td>
127 <td>天气预报</td>
128 </tr>
129 <tr>
130 <td>甘肃卫视</td>
131 <td>2016/11/07</td>
132 <td>天气预报</td>
133 </tr>
134 <tr>
135 <td>安徽卫视</td>
136 <td>2016/11/07</td>
137 <td>天气预报</td>
138 </tr>
139 <tr>
140 <td>CCTV</td>
141 <td>2016/11/07</td>
142 <td>天气预报</td>
143 </tr>
144 <tr>
145 <td>广东卫视</td>
146 <td>2016/11/07</td>
147 <td>天气预报</td>
148 </tr>
149 <tr class="last-no-border">
150 <td>甘肃卫视</td>
151 <td>2016/11/07</td>
152 <td>天气预报</td>
153 </tr>
154 </tbody>
155 </table>
156 </div>
157 <div class="table-div" style="display: none;" tab-index="1">
158 <table cellpadding="0" cellspacing="0" border="0" class="table">
159 <thead>
160 <tr>
161 <td>播出频道</td>
162 <td>时间</td>
163 <td>节目</td>
164 </tr>
165 </thead>
166 <tbody>
167 <tr>
168 <td>安徽卫视</td>
169 <td>2016/11/08</td>
170 <td>天气预报</td>
171 </tr>
172 <tr>
173 <td>CCTV</td>
174 <td>2016/11/08</td>
175 <td>天气预报</td>
176 </tr>
177 </tbody>
178 </table>
179 </div>
180 <div class="table-div" style="display: none;" tab-index="2">
181 <table cellpadding="0" cellspacing="0" border="0" class="table">
182 <thead>
183 <tr>
184 <td>播出频道</td>
185 <td>时间</td>
186 <td>节目</td>
187 </tr>
188 </thead>
189 <tbody>
190 <tr>
191 <td>安徽卫视</td>
192 <td>2016/11/09</td>
193 <td>天气预报</td>
194 </tr>
195 <tr>
196 <td>CCTV</td>
197 <td>2016/11/09</td>
198 <td>天气预报</td>
199 </tr>
200 </tbody>
201 </table>
202 </div>
203 <div class="table-div" style="display: none;" tab-index="3">
204 <table cellpadding="0" cellspacing="0" border="0" class="table">
205 <thead>
206 <tr>
207 <td>播出频道</td>
208 <td>时间</td>
209 <td>节目</td>
210 </tr>
211 </thead>
212 <tbody>
213 <tr>
214 <td>安徽卫视</td>
215 <td>2016/11/10</td>
216 <td>天气预报</td>
217 </tr>
218 <tr>
219 <td>CCTV</td>
220 <td>2016/11/10</td>
221 <td>天气预报</td>
222 </tr>
223 </tbody>
224 </table>
225 </div>
226 <div class="table-div" style="display: none;" tab-index="4">
227 <table cellpadding="0" cellspacing="0" border="0" class="table">
228 <thead>
229 <tr>
230 <td>播出频道</td>
231 <td>时间</td>
232 <td>节目</td>
233 </tr>
234 </thead>
235 <tbody>
236 <tr>
237 <td>安徽卫视</td>
238 <td>2016/11/11</td>
239 <td>天气预报</td>
240 </tr>
241 <tr>
242 <td>CCTV</td>
243 <td>2016/11/11</td>
244 <td>天气预报</td>
245 </tr>
246 </tbody>
247 </table>
248 </div>
249 <div class="table-div" style="display: none;" tab-index="5">
250 <table cellpadding="0" cellspacing="0" border="0" class="table">
251 <thead>
252 <tr>
253 <td>播出频道</td>
254 <td>时间</td>
255 <td>节目</td>
256 </tr>
257 </thead>
258 <tbody>
259 <tr>
260 <td>安徽卫视</td>
261 <td>2016/11/12</td>
262 <td>天气预报</td>
263 </tr>
264 <tr>
265 <td>CCTV</td>
266 <td>2016/11/12</td>
267 <td>天气预报</td>
268 </tr>
269 </tbody>
270 </table>
271 </div>
272 <div class="table-div" style="display: none;" tab-index="5">
273 <table cellpadding="0" cellspacing="0" border="0" class="table">
274 <thead>
275 <tr>
276 <td>播出频道</td>
277 <td>时间</td>
278 <td>节目</td>
279 </tr>
280 </thead>
281 <tbody>
282 <tr>
283 <td>安徽卫视</td>
284 <td>2016/11/12</td>
285 <td>天气预报</td>
286 </tr>
287 <tr>
288 <td>CCTV</td>
289 <td>2016/11/12</td>
290 <td>天气预报</td>
291 </tr>
292 </tbody>
293 </table>
294 </div>
295 <div class="table-div" style="display: none;" tab-index="6">
296 <table cellpadding="0" cellspacing="0" border="0" class="table">
297 <thead>
298 <tr>
299 <td>播出频道</td>
300 <td>时间</td>
301 <td>节目</td>
302 </tr>
303 </thead>
304 <tbody>
305 <tr>
306 <td>安徽卫视</td>
307 <td>2016/11/13</td>
308 <td>天气预报</td>
309 </tr>
310 <tr>
311 <td>CCTV</td>
312 <td>2016/11/13</td>
313 <td>天气预报</td>
314 </tr>
315 </tbody>
316 </table>
317 </div>
318 <div class="div-buttn btn-show" button-index="0">
319 显示全部<i class="c-icon c-icon-bottom"></i>
320 </div>
321 <div class="div-buttn btn-collapse" style="display: none;" button-index="0">
322 折叠<i class="c-icon c-icon-top"></i>
323 </div>
324 </div>
325
326 <script type="text/javascript" src="./js/lib/jquery-3.1.1.min.js"></script>
327 <!--时间：2016-11-09 作者：zhangjiangfeng 描述：选项卡jQuery版本实现 -->
328 <!--<script type="text/javascript" src="js/switchTab-jQuery.js" ></script>
329 <!--时间：2016-11-12 作者：zhangjiangfeng 描述：选项卡原生js版本实现 -->
330 <script type="text/javascript" src="js/switchTab-javaScript.js" ></script>
331 </body>
332 </html>/**
2 * Author Zhangjiangfeng
3 * Date 2016/11/9 PM 20:35 night
4 * 选项卡样式实现
5 */
6 html {
7 font-family: "微软雅黑";
8 font-size: 12px;
9 }
10 div, ul, li, p, a {
11 margin: 0;
12 padding: 0;
13 }
14 .nav-tab {
15 width: 565px;
16 height: 54px;
17 background-color: #fafafa;
18 position: relative;
19 display: inline-block;
20 }
21 ul.main-tab {
22 list-style: none;
23 margin: 0;
24 padding: 0;
25 height: 100%;
26 font-size: 0; /*消除display: inline-block间隙*/
27 border-bottom: 1px solid #d9d9d9;
28 margin-bottom: -2px;
29 }
30 ul.main-tab li {
31 display: inline-block;
32 height: 48px;
33 padding-top: 4px;
34 border-width: 2px 1px 0;
35 border-color: #999;
36 border-style: solid;
37 border-color: rgba(0,0,0,0);
38 _border-color:tomato;
39 _filter:chroma(color=#ff6347);
40 }
41 ul.main-tab li a {
42 display: inline-block;
43 height: 100%;
44 text-decoration: none;
45 color: #333;
46 }
47
48 ul.main-tab li p {
49 font-size: 12px;
50 line-height: 20px;
51 padding: 0 20px;
52 }
53 /*利用边框的透明从而减少li盒子计算样式*/
54 ul.main-tab li {
55 border-width: 2px 1px 0;
56 border-top-color: #19A6A6;
57 border-left-color: #d9d9d9;
58 border-right-color: #d9d9d9;
59 border-style: solid;
60 border-color: rgba(0,0,0,0);
61 }
62 /* ul.main-tab li:hover {
63 border-width: 2px 1px 0;
64 border-top-color: #19A6A6;
65 border-left-color: #d9d9d9;
66 border-right-color: #d9d9d9;
67 border-bottom: #FFFFFF;
68 border-style: solid;
69 background-color: #FFFFFF;
70 }*/
71 /*选项卡选中样式*/
72 ul.main-tab li.active {
73 border-width: 2px 1px 0;
74 border-top-color: #19A6A6;
75 border-left-color: #d9d9d9;
76 border-right-color: #d9d9d9;
77 border-bottom: #FFFFFF;
78 border-style: solid;
79 background-color: #FFFFFF;
80 }
81
82 /*选项卡内容样式*/
83 .tab-content {
84 width: 543px;
85 min-height: 250px;
86 border: 1px solid #d9d9d9;
87 border-top: none;
88 padding: 10px;
89 position: relative;
90 }
91 .table {
92 width: 100%;
93 display: table;
94 border-collapse: collapse;
95 border: 0;
96 }
97 .table tr td {
98 padding: 10px;
99 border-bottom: solid 1px #d9d9d9;
100 }
101 .table tr.last-no-border td {
102 border-bottom: none;
103 }
104 .div-buttn {
105 width: 100%;
106 height: 30px;
107 cursor: pointer;
108 line-height: 30px;
109 text-align: center;
110 background-color: #fafafa;
111 }
112 .div-buttn i {
113 width: 14px;
114 height: 14px;
115 margin-left: 5px;
116 display: inline-block;
117 vertical-align: text-bottom;
118 font-style: normal;
119 }
120 .div-buttn i.c-icon {
121 background: url(../img/icons.png) no-repeat 0 0;
122 }
123 .div-buttn i.c-icon-bottom {
124 background-position: -71px -168px;
125 }
126 .div-buttn i.c-icon-top {
127 background-position:-96px -168px
128 }
129 .close {
130 display: none;
131 }$(function(){
3 var $navTab = $("#nav-tab"); //选项卡对象
4 var $tabCont = $(".tab-content"); //选项卡内容
5 var $tabContList = $tabCont.find(".table-div"); //选项卡内容列表
6 var $btnShow = $(".btn-show"); //显示全部
7 var $btnCollapse = $(".btn-collapse"); //折叠
8 //选项卡事件绑定
9 $navTab.on("click", "li", function(){
10 var $that = $(this);
11 //获取当前索引值
12 var navIndex = $that.attr("index");
13 //当前点击li添加active类，同级兄弟节点移除active类
14 $that.addClass("active").siblings().removeClass("active");
15 //当当前点击选项卡navIndex值与表格列表索引tabIndex值相等时显示，否则隐藏
16 $tabContList.each(function(i){
17 var $that = $(this);
18 var tabIndex = $that.attr("tab-index"); //表格列表索引
19 if(navIndex===tabIndex){
20 $that.show();
21 }else{
22 $that.hide();
23 }
24 })
25 //设置显示全部与折叠按钮索引值---标识当前选中选项卡
26 $btnShow.attr("button-index",navIndex);
27 $btnCollapse.attr("button-index", navIndex);
28 });
29
30 //显示全部
31 $btnShow.on("click", function(){
32 var $that = $(this);
33 var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
34 $that.hide();
35 $btnCollapse.show();
36 $tabContList.each(function(i){
37 var $that = $(this);
38 var tabIndex = $that.attr("tab-index"); //表格列表索引
39 if(btnIndex===tabIndex){
40 $that.show();
41 }
42 })
43 })
44
45 //折叠
46 $btnCollapse.on("click", function(){
47 var $that = $(this);
48 var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
49 $that.hide();
50 $btnShow.show();
51 $tabContList.each(function(i){
52 var $that = $(this);
53 var tabIndex = $that.attr("tab-index"); //表格列表索引
54 if(btnIndex===tabIndex){
55 $that.hide();
56 }
57 })
58 });
59
60 })/*选项卡切换功能js实现*/
2 window.onload = function(){
3 var oTab = document.getElementById("nav-tab");
4 var liArray = oTab.getElementsByTagName("li");
5 var tabList = document.getElementsByClassName("table-div");
6 var btnShow = document.getElementsByClassName("btn-show");
7 var btnCollapse = document.getElementsByClassName("btn-collapse");
8 for (var i=0; i<liArray.length; i++) {
9 liArray[i].onclick = function(){
10 for (var j=0; j<liArray.length; j++) {
11 //移除class样式
12 liArray[j].className = "";
13 }
14 //添加class样式
15 this.className = "active";
16 //获取DOM索引值
17 var index = this.getAttribute("index");
18 btnShow[0].setAttribute("button-index", index);
19 btnCollapse[0].setAttribute("button-index", index);
20
21 //内容切换
22 for (var t = 0; t<tabList.length; t++) {
23 var tableIndex = tabList[t].getAttribute("tab-index");
24 if(index === tableIndex){
25 tabList[t].style.display = "block";
26 }else{
27 tabList[t].style.display = "none";
28 }
29 }
30
31 }
32 }
33
34 //显示全部
35 btnShow[0].onclick = function(){
36 var btnIndex = this.getAttribute("button-index");
37 //表格index与按钮btnIndex
38 for (var t = 0; t<tabList.length; t++) {
39 var tableIndex = tabList[t].getAttribute("tab-index");
40 if(btnIndex === tableIndex){
41 tabList[t].style.display = "block";
42 }
43 }
44 this.style.display = "none";
45 btnCollapse[0].style.display = "block";
46 }
47 //折叠
48 btnCollapse[0].onclick = function(){
49 var btnIndex = this.getAttribute("button-index");
50 //表格index与按钮btnIndex
51 for (var t = 0; t<tabList.length; t++) {
52 var tableIndex = tabList[t].getAttribute("tab-index");
53 if(btnIndex === tableIndex){
54 tabList[t].style.display = "none";
55 }
56 }
57 this.style.display = "none";
58 btnShow[0].style.display = "block";
59
60 }
61
62 }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读