1.選項卡效果預(yù)覽
2.源碼與簡要說明
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>切換選項卡功能實現(xiàn)</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>廣東衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>甘肅衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>廣東衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>甘肅衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>廣東衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>甘肅衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr> <td>廣東衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</td> </tr> <tr class="last-no-border"> <td>甘肅衛(wèi)視</td> <td>2016/11/07</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/08</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/08</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/09</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/09</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/10</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/10</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/11</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/11</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/12</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/12</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/12</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/12</td> <td>天氣預(yù)報</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>節(jié)目</td> </tr> </thead> <tbody> <tr> <td>安徽衛(wèi)視</td> <td>2016/11/13</td> <td>天氣預(yù)報</td> </tr> <tr> <td>CCTV</td> <td>2016/11/13</td> <td>天氣預(yù)報</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版本實現(xiàn) --> <!--<script type="text/javascript" src="js/switchTab-jQuery.js" ></script> <!--時間：2016-11-12 作者：zhangjiangfeng 描述：選項卡原生js版本實現(xiàn) --> <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 * 選項卡樣式實現(xiàn) */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;}/*選項卡內(nèi)容樣式*/.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.切換不同選項卡顯示對應(yīng)內(nèi)容
b.點擊折疊/展開按鈕時，操作的是哪一選項卡對應(yīng)的內(nèi)容
3.switchTab-jQuery.js動態(tài)效果實現(xiàn)
/*選項卡切換功能借助jQuery實現(xiàn)*/$(function(){ var $navTab = $("#nav-tab"); //選項卡對象 var $tabCont = $(".tab-content"); //選項卡內(nèi)容 var $tabContList = $tabCont.find(".table-div"); //選項卡內(nèi)容列表 var $btnShow = $(".btn-show"); //顯示全部 var $btnCollapse = $(".btn-collapse"); //折疊 //選項卡事件綁定 $navTab.on("click", "li", function(){ var $that = $(this); //獲取當(dāng)前索引值 var navIndex = $that.attr("index"); //當(dāng)前點擊li添加active類，同級兄弟節(jié)點移除active類 $that.addClass("active").siblings().removeClass("active"); //當(dāng)當(dāng)前點擊選項卡navIndex值與表格列表索引tabIndex值相等時顯示，否則隱藏 $tabContList.each(function(i){ var $that = $(this); var tabIndex = $that.attr("tab-index"); //表格列表索引 if(navIndex===tabIndex){ $that.show(); }else{ $that.hide(); } }) //設(shè)置顯示全部與折疊按鈕索引值---標(biāo)識當(dāng)前選中選項卡 $btnShow.attr("button-index",navIndex); $btnCollapse.attr("button-index", navIndex); }); //顯示全部 $btnShow.on("click", function(){ var $that = $(this); var btnIndex = $that.attr("button-index"); //獲取當(dāng)前按鈕的索引值 $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"); //獲取當(dāng)前按鈕的索引值 $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效果實現(xiàn)
/*選項卡切換功能js實現(xiàn)*/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); //內(nèi)容切換 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"; } }以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持武林網(wǎng)！
新聞熱點
疑難解答
