1.选项卡效果预览
2.源码与简要说明
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换选项卡功能实现</title> <link href="https://www.jb51.net/css/switchTab.css" /> </head> <body> <div> <ul> <li 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> <div tab-index="0"> <table cellpadding="0" cellspacing="0"> <colgroup> <col/> <col/> <col/> </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 tab-index="0"> <table cellpadding="0" cellspacing="0"> <colgroup> <col/> <col/> <col/> </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 tab-index="0"> <table cellpadding="0" cellspacing="0"> <colgroup> <col/> <col/> <col/> </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> <td>甘肃卫视</td> <td>2016/11/07</td> <td>天气预报</td> </tr> </tbody> </table> </div> <div tab-index="1"> <table cellpadding="0" cellspacing="0"> <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 tab-index="2"> <table cellpadding="0" cellspacing="0"> <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 tab-index="3"> <table cellpadding="0" cellspacing="0"> <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 tab-index="4"> <table cellpadding="0" cellspacing="0"> <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 tab-index="5"> <table cellpadding="0" cellspacing="0"> <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 tab-index="5"> <table cellpadding="0" cellspacing="0"> <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 tab-index="6"> <table cellpadding="0" cellspacing="0"> <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 button-index="0"> 显示全部<i></i> </div> <div button-index="0"> 折叠<i></i> </div> </div> <script type="text/javascript" src="https://www.jb51.net/article/js/lib/jquery-3.1.1.min.js"></script> <!--时间：2016-11-09 作者：zhangjiangfeng 描述：选项卡jQuery版本实现 --> <!--<script type="text/javascript" src="https://www.jb51.net/js/switchTab-jQuery.js" ></script> <!--时间：2016-11-12 作者：zhangjiangfeng 描述：选项卡原生js版本实现 --> <script type="text/javascript" src="https://www.jb51.net/js/switchTab-javaScript.js" ></script> </body> </html>
switchTab.css 选项卡样式小技巧简要说明
对于选项卡未选中时利用边框透明border-color: rgba(0,0,0,0);；选中后边框顶部颜色border-top-color显示，
这一技巧从而减少其选项卡盒子模型的计算