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="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>