常见选项卡内容切换+折叠+展开效果实现
Posted 苍暮之星
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常见选项卡内容切换+折叠+展开效果实现相关的知识，希望对你有一定的参考价值。
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 </tableQTabView 隐藏选项卡内容但不隐藏选项卡栏微信小程序swiper切换选项卡,每个选项卡内容不一样,,怎么让item的高度自适应
引导选项卡内容 slideDown/slideUp 不起作用