Avenstar通过本文主要向大家介绍了js选项卡,js选项卡代码,js选项卡切换,js选项卡切换代码,js tab选项卡等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
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" cellspa