首页 > 代码库 > 常见选项卡内容切换+折叠+展开效果实现
常见选项卡内容切换+折叠+展开效果实现
1.选项卡效果预览
2.源码与简要说明
1 <!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="http://www.mamicode.com/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>
switchTab.css 选项卡样式小技巧简要说明
对于选项卡未选中时利用边框透明border-color: rgba(0,0,0,0);；选中后边框顶部颜色border-top-color显示，
这一技巧从而减少其选项卡盒子模型的计算
1 /** 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 }
switchTab-jQuery/switchTab-javaScript思路简要说明
a.切换不同选项卡显示对应内容
b.点击折叠/展开按钮时，操作的是哪一选项卡对应的内容
3.switchTab-jQuery.js动态效果实现
1 /*选项卡切换功能借助jQuery实现*/ 2 $(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 })
3.switchTab-javaScript效果实现
1 /*选项卡切换功能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 }
内容扩展 常见几种Tab类型实现
常见选项卡内容切换+折叠+展开效果实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。