如何用最原始的方法实现选项卡的效果（input）

前面介绍过input表单，input表单中有单选框，我们今天就看一下如何用input表单中的单选框来实现选项卡的效果。
今天我们一起来做一张课程表，来看看它是如何实现的。
首先我们先绘制一张课程表的时间表：
星期一到星期日，我们可以用一个无序列表来实现，每个li里包着这一天的课程；

表头.png

选项卡顾名思义就是选中一个就会出现当前目录下的内容，前面介绍过input表单中用label标签包着的内容，当它的for的值和单选框的id相同时就能让它们两产生联系，即选中文字就能选中单选框。
那我们要实现日期被选中，就得用label把日期包起来：

 <input type="radio" name="check" id="kecheng1">
 <label for="kecheng1">
         星期一
 </label>

radio1.png

这样很丑，日期都被单选框挤出来了，我们给input框隐藏起来，在css中给它一个display：

input{
    display: none;
}

radio2.png

这样是不是美观多了。

其他日期同样方法，得给每个单选框同一个name名，每一个input的id名都不能一样，否则选一个全都能被选中。
然后我们在每一个lable后用表格绘制每一天的课程表：

<table rules="all">
                <tbody>
                    <tr>
                        <td>8:30-9:15</td>
                        <td>9:25-10:10</td>
                        <td>10:20-11:05</td>
                        <td>11:15-12:00</td>
                        <td>13:00-13:45</td>
                        <td>13:55-14:40</td>
                        <td>14:50-15:35</td>
                        <td>15:45-16:40</td>
                    </tr>
                    <tr>
                        <td>语文</td>
                        <td>数学</td>
                        <td>物理</td>
                        <td>化学</td>
                        <td>体育</td>
                        <td>政治</td>
                        <td>地理</td>
                        <td>生物</td>
                    </tr>
                </tbody>
</table>

目前为止，基本已大功告成
实现的效果如下：

image.png

只要把每天的课程写在对应的日期下就行，总体是这样写的：

     <li>
            <input type="radio" name="check" id="kecheng2">
            <label for="kecheng2">
                星期二
            </label>
            <table rules="all">
                <tbody>
                    <tr>
                        <td>8:30-9:15</td>
                        <td>9:25-10:10</td>
                        <td>10:20-11:05</td>
                        <td>11:15-12:00</td>
                        <td>13:00-13:45</td>
                        <td>13:55-14:40</td>
                        <td>14:50-15:35</td>
                        <td>15:45-16:40</td>
                    </tr>
                    <tr>
                        <td>英语</td>
                        <td>语文</td>
                        <td>化学</td>
                        <td>地理</td>
                        <td>美术</td>
                        <td>数学</td>
                        <td>物理</td>
                        <td>生物</td>
                    </tr>
                </tbody>
            </table>
        </li>

现在我们先给课程设置一个样式和隐藏，给li一个相对定位，给课程表表格一个绝对定位，让它不占位并给个坐标，让它显示在你想让它待着的地方：

table{
    width: 644px;
    border:solid 2px black;
    position: absolute;
    left: 0;
    top: 30px;
    display: none;
    background: green;
}

现在就只显示日期选项卡，看上去和上述表头是同样的效果。
然后给label一个滑动效果，使之更美观：

  li:hover label{
      background:blue;
      color:red;
  }

当然我这的颜色是随便给的，不太美观

image.png

然后给每个li一个选中选中效果，让它选中高亮：

input:checked~label{
    background:green;
}

image.png

最后在给一个input框一个选中效果，使它同一个li下的兄弟元素。课程表的tabel表格出现就可以了：

input:checked~table{
    display:block;
}

现在一个完整的课程表选项卡就完成了：

image.png

当然，如果想让某一天的课程默认出现在那，只需要给那天课程所在的input框加上一个默认选中checked值就可以了，刷新之后它是默认停留在那一天的课程上，当需要看其他日期课程的时候点击相应日期就可以了。

用input表单制作选项卡就说完了，希望对大家有所帮助。

小编能力有限，存在不足或不全，请大家指出，共同学习与交流。