纯css实现tab切换

CSS

可能大部分人用li只是想着写一个列表，但是我在给别人review代码的时候，发现一个有趣的做法，结合li使用input<type="radio">和display:none;实现tab切换，具体表现可以看下demo，下面讲一下具体的原理~

所使用的html结构

<div class="material">
    <ul>
        <li>
            <input type="radio" id="pro">
            <label for="pro">项目一</label>
            <div class="tab">
                <table>···</table>
            </div>
        </li>
        <li>···</li> /*结构同上*/
        <li>···</li>
        <li>···</li>
        <li>···</li>
    </ul>
</div>

一些必须搞懂的概念

display: none

大部分使用display属性的时候值是不是block就是table，反而忽略了none这个值，说起来display: none；和visible: hidden很相似，都可以隐藏一部分，但是不同之处在于前者不仅可以隐藏一个对象同时也不保留其在页面上面的空间，就是“看不见摸不到”；但是后者只是隐藏起来在页面不可见，但是其空间是保留的，即“看不见摸得到”，
这次就使用了这个概念将表格部分完全隐藏然后使用float将label部分浮动到同一行当做表头部分，并且使用appearance属性将单选的按钮消除就更加完美了

:checked

css3里面的一个选择器，可以匹配每个选中的input元素，这里使用其使得被选中的label对应的table显示出来

表格位置问题

我们已经知道使用float浮动出来可点击的表头部分，并且隐藏了点击后我们可以看到的table。那么，table该怎么设置其位置更合适呢？我推荐使用position:absolute,这是因为table是跟在每个label后面的，如果不是使用absolute这个属性的话每次点击之后出来的table都是跟在每个label下面的看着很不协调