用純CSS達成TAB的效果

簡介與示範
DEMO

the pros and cons


優點:
使用CSS來完成TAB的效果優點是不用再載入javascript, 並且跨瀏覽器也能運作得當,
就算沒有javascript也能夠有tab的效果。


缺點:
每個內容的div block高度都必須仔細計算,所以你必須先知道你的內容大概有多少
然後仔細計算整個div的高度。並且高度的單位需用em來resize, 以防使用者調整其字體大小時
有些內容會被隱藏。此外,也沒有辦法highlight已經被actived的tab!

為什麼會有後方的缺點是因為其使用overflow:hidden這個屬性來達成tab的效果。
也因此,一旦超過所限定的div範圍時,內容就被隱藏無法看見了,如果是純靜態網頁或許可以考慮使用這個做法,但如果是對於更新頻繁的動態頁面,這就不太理想了!