1.选项卡效果预览
2.源码与简要说明
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>切换选项卡功能实现</title> <link rel="stylesheet" href="css/switchTab.css" /> </head> <body> <div class="nav-tab"> <ul class="main-tab" id="nav-tab"> <li class="active" index="0"> <a href="#none"><p>星期一</p><p>11-07</p></a> </li> <li index="1"><a href="#none"><p>星期二</p><p>11-08</p></a></li> <li index="2"><a href="#none"><p>星期三</p><p>11-09</p></a></li> <li index="3"><a href="#none"><p>星期四</p><p>11-10</p></a></li> <li index="4"><a href="#none"><p>星期五</p><p>11-11</p></a></li> <li index="5"><a href="#none"><p>星期六</p><p>11-12</p></a></li> <li index="6"><a href="#none"><p>星期日</p><p>11-13</p></a></a></li> </ul> </div> <div class="tab-content"> <div class="table-div" style="display: block;" tab-index="0"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <colgroup> <col align="left" width="40%"/> <col align="left" width="30%"/> <col align="right" width="30%"/> </colgroup> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>广东卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>甘肃卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="0"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <colgroup> <col align="left" width="40%"/> <col align="left" width="30%"/> <col align="right" width="30%"/> </colgroup> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>广东卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>甘肃卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="0"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <colgroup> <col align="left" width="40%"/> <col align="left" width="30%"/> <col align="right" width="30%"/> </colgroup> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>广东卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>甘肃卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>安徽卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr> <td>广东卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> <tr class="last-no-border"> <td>甘肃卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="1"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/08</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/08</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="2"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/09</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/09</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="3"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/10</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/10</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="4"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/11</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/11</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="5"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/12</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/12</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="5"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/12</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/12</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="table-div" style="display: none;" tab-index="6"> <table cellpadding="0" cellspacing="0" border="0" class="table"> <thead> <tr> <td>播出频道</td> <td>时间</td> <td>节目</td> </tr> </thead> <tbody> <tr> <td>安徽卫视</td> <td>2016/11/13</td> <td>天气预报</td> </tr> <tr> <td>CCTV</td> <td>2016/11/13</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div class="div-buttn btn-show" button-index="0"> 显示全部<i class="c-icon c-icon-bottom"></i> </div> <div class="div-buttn btn-collapse" style="display: none;" button-index="0"> 折叠<i class="c-icon c-icon-top"></i> </div> </div> <script type="text/javascript" src="./js/lib/jquery-3.1.1.min.js"></script> <!--时间：2016-11-09 作者：zhangjiangfeng 描述：选项卡jQuery版本实现 --> <!--<script type="text/javascript" src="js/switchTab-jQuery.js" ></script> <!--时间：2016-11-12 作者：zhangjiangfeng 描述：选项卡原生js版本实现 --> <script type="text/javascript" src="js/switchTab-javaScript.js" ></script> </body></html>
switchTab.css 选项卡样式小技巧简要说明
对于选项卡未选中时利用边框透明border-color: rgba(0,0,0,0);；选中后边框顶部颜色border-top-color显示，
这一技巧从而减少其选项卡盒子模型的计算
/** * Author Zhangjiangfeng * Date 2016/11/9 PM 20:35 night * 选项卡样式实现 */html { font-family: "微软雅黑"; font-size: 12px;}div, ul, li, p, a { margin: 0; padding: 0;}.nav-tab { width: 565px; height: 54px; background-color: #fafafa; position: relative; display: inline-block;}ul.main-tab { list-style: none; margin: 0; padding: 0; height: 100%; font-size: 0; /*消除display: inline-block间隙*/ border-bottom: 1px solid #d9d9d9; margin-bottom: -2px;}ul.main-tab li { display: inline-block; height: 48px; padding-top: 4px; border-width: 2px 1px 0; border-color: #999; border-style: solid; border-color: rgba(0,0,0,0); _border-color:tomato; _filter:chroma(color=#ff6347);}ul.main-tab li a { display: inline-block; height: 100%; text-decoration: none; color: #333;}ul.main-tab li p { font-size: 12px; line-height: 20px; padding: 0 20px;}/*利用边框的透明从而减少li盒子计算样式*/ul.main-tab li { border-width: 2px 1px 0; border-top-color: #19A6A6; border-left-color: #d9d9d9; border-right-color: #d9d9d9; border-style: solid; border-color: rgba(0,0,0,0);}/* ul.main-tab li:hover { border-width: 2px 1px 0; border-top-color: #19A6A6; border-left-color: #d9d9d9; border-right-color: #d9d9d9; border-bottom: #FFFFFF; border-style: solid; background-color: #FFFFFF; }*//*选项卡选中样式*/ul.main-tab li.active { border-width: 2px 1px 0; border-top-color: #19A6A6; border-left-color: #d9d9d9; border-right-color: #d9d9d9; border-bottom: #FFFFFF; border-style: solid; background-color: #FFFFFF;}/*选项卡内容样式*/.tab-content { width: 543px; min-height: 250px; border: 1px solid #d9d9d9; border-top: none; padding: 10px; position: relative;}.table { width: 100%; display: table; border-collapse: collapse; border: 0;}.table tr td { padding: 10px; border-bottom: solid 1px #d9d9d9;}.table tr.last-no-border td { border-bottom: none;}.div-buttn { width: 100%; height: 30px; cursor: pointer; line-height: 30px; text-align: center; background-color: #fafafa;}.div-buttn i { width: 14px; height: 14px; margin-left: 5px; display: inline-block; vertical-align: text-bottom; font-style: normal;}.div-buttn i.c-icon { background: url(../img/icons.png) no-repeat 0 0;}.div-buttn i.c-icon-bottom { background-position: -71px -168px;}.div-buttn i.c-icon-top { background-position:-96px -168px}.close { display: none;}switchTab-jQuery/switchTab-javaScript思路简要说明
a.切换不同选项卡显示对应内容
b.点击折叠/展开按钮时，操作的是哪一选项卡对应的内容
3.switchTab-jQuery.js动态效果实现
/*选项卡切换功能借助jQuery实现*/$(function(){ var $navTab = $("#nav-tab"); //选项卡对象 var $tabCont = $(".tab-content"); //选项卡内容 var $tabContList = $tabCont.find(".table-div"); //选项卡内容列表 var $btnShow = $(".btn-show"); //显示全部 var $btnCollapse = $(".btn-collapse"); //折叠 //选项卡事件绑定 $navTab.on("click", "li", function(){ var $that = $(this); //获取当前索引值 var navIndex = $that.attr("index"); //当前点击li添加active类，同级兄弟节点移除active类 $that.addClass("active").siblings().removeClass("active"); //当当前点击选项卡navIndex值与表格列表索引tabIndex值相等时显示，否则隐藏 $tabContList.each(function(i){ var $that = $(this); var tabIndex = $that.attr("tab-index"); //表格列表索引 if(navIndex===tabIndex){ $that.show(); }else{ $that.hide(); } }) //设置显示全部与折叠按钮索引值---标识当前选中选项卡 $btnShow.attr("button-index",navIndex); $btnCollapse.attr("button-index", navIndex); }); //显示全部 $btnShow.on("click", function(){ var $that = $(this); var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值 $that.hide(); $btnCollapse.show(); $tabContList.each(function(i){ var $that = $(this); var tabIndex = $that.attr("tab-index"); //表格列表索引 if(btnIndex===tabIndex){ $that.show(); } }) }) //折叠 $btnCollapse.on("click", function(){ var $that = $(this); var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值 $that.hide(); $btnShow.show(); $tabContList.each(function(i){ var $that = $(this); var tabIndex = $that.attr("tab-index"); //表格列表索引 if(btnIndex===tabIndex){ $that.hide(); } }) });})3.switchTab-javaScript效果实现
/*选项卡切换功能js实现*/window.onload = function(){ var oTab = document.getElementById("nav-tab"); var liArray = oTab.getElementsByTagName("li"); var tabList = document.getElementsByClassName("table-div"); var btnShow = document.getElementsByClassName("btn-show"); var btnCollapse = document.getElementsByClassName("btn-collapse"); for (var i=0; i<liArray.length; i++) { liArray[i].onclick = function(){ for (var j=0; j<liArray.length; j++) { //移除class样式 liArray[j].className = ""; } //添加class样式 this.className = "active"; //获取DOM索引值 var index = this.getAttribute("index"); btnShow[0].setAttribute("button-index", index); btnCollapse[0].setAttribute("button-index", index); //内容切换 for (var t = 0; t<tabList.length; t++) { var tableIndex = tabList[t].getAttribute("tab-index"); if(index === tableIndex){ tabList[t].style.display = "block"; }else{ tabList[t].style.display = "none"; } } } } //显示全部 btnShow[0].onclick = function(){ var btnIndex = this.getAttribute("button-index"); //表格index与按钮btnIndex for (var t = 0; t<tabList.length; t++) { var tableIndex = tabList[t].getAttribute("tab-index"); if(btnIndex === tableIndex){ tabList[t].style.display = "block"; } } this.style.display = "none"; btnCollapse[0].style.display = "block"; } //折叠 btnCollapse[0].onclick = function(){ var btnIndex = this.getAttribute("button-index"); //表格index与按钮btnIndex for (var t = 0; t<tabList.length; t++) { var tableIndex = tabList[t].getAttribute("tab-index"); if(btnIndex === tableIndex){ tabList[t].style.display = "none"; } } this.style.display = "none"; btnShow[0].style.display = "block"; } }以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！
新闻热点
疑难解答
