可能大部分人用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下面的看着很不協調，
具體如下圖所示：
所以采用position:absolute;，以最外圍包裹的div的position值設為relative，移動table的位置到表頭下方，參照效果圖：
