用純CSS實現優雅的tab頁

說明

又是一個練手的小玩意兒，自己沒什麼技術含量，就是幾個不經常使用的CSS3特性的結合而已。

要點

• Label標籤的for屬性

• 單選框的:checked僞類

• CSS的加號[+]選擇器

效果圖

原理

一般tab頁的交互都是點擊tab頭而後展現對應的一塊內容，這種排他性跟HTML裏面的某個原住民很相似，是啥呢？沒錯！就是單選框組。

單選框組有一個:checked僞類，能夠設定單選框被選中後的樣式，因此咱們要把一組單選框當作tab頁的頭部麼？固然不是，單選框是很執拗的，用CSS去感化他是很吃力的，那怎麼辦呢？

這裏就要用到CSS裏面的+選擇器了[實際上這個選擇器我以前歷來沒用過-_-||]，簡單來講+選擇器就是選擇緊跟在某個指定元素後面的另外一個指定的元素，具體介紹請看 http://www.w3school.com.cn/cs...

Label的for屬性是一個頗有意思的東西，能夠理解爲一個遙控器：位於頁面底部的一個label標籤能夠經過for屬性來控制頁面頂部的一個單選框或者複選框~，是否是很神奇？（噗→_→）

結合以上特色，能夠獲得一個實現tab頁的基本思路：

一個單選按鈕後面跟一個lable[tab頭]，再後面跟上一個div[tab內容塊]
用.radio:checked + .tab-header 指定當前tab頭的樣式
用.radio:checked + .tab-header + .tab-content 指定當前tab內容塊的樣式

代碼

<div class="container">
  <div class="tab-wrapper">
    <!--tab section 1-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>
    <label for="tab-radio-1" class="tab-handler tab-handler-1">水滸傳</label>
    <div class="tab-content tab-content-1">《水滸傳》是中國歷史上第一部用古白話文寫成的歌頌農民起義的長篇章回體版塊結構小說，以宋江領導的起義軍爲主要題材，經過一系列梁山英雄反抗壓迫、英勇鬥爭的生動故事，暴露了北宋末年統治階級的腐朽和殘暴，揭露了當時尖銳對立的社會矛盾和「官逼民反」的殘酷現實。按120回本計，前70回講述各個好漢上梁山，後50回主要爲宋江全夥受招安爲朝廷效力，以及被奸臣所害。</div>
    <!--tab section 2-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">
    <label for="tab-radio-2" class="tab-handler tab-handler-2">三國演義</label>
    <div class="tab-content tab-content-2">《三國演義》是中國古典四大名著之一，全名爲《三國志通俗演義》。做者是元末明初小說家羅貫中，是中國第一部長篇章回體歷史演義小說。描寫了從東漢末年到西晉初年之間近105年的歷史風雲。全書反映了三國時代的政治軍事鬥爭，反映了三國時代各種社會矛盾的轉化，並歸納了這一時代的歷史鉅變，塑造了一批叱吒風雲的三國英雄人物。</div>
    <!--tab section 3-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-3">
    <label for="tab-radio-3" class="tab-handler tab-handler-3">西遊記</label>
    <div class="tab-content tab-content-3">《西遊記》是中國古典四大名著之一，是由明代小說家吳承恩所創做的中國古代第一部浪漫主義的長篇神魔小說。主要描寫了唐朝太宗貞觀年間孫悟空、豬八戒、沙僧、白龍馬四弟子保護唐僧西行取經，沿途歷經九九八十一難，一路降妖伏魔，化險爲夷，最後到達西天，取得真經的故事。取材於《大唐三藏取經詩話》和漢族民間傳說。 [1] </div>
    <!--tab section 4-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-4">
    <label for="tab-radio-4" class="tab-handler tab-handler-4">紅樓夢</label>
    <div class="tab-content tab-content-4">《紅樓夢》，中國古典四大名著之首，清代做家曹雪芹創做的章回體長篇小說[1] 。早期僅有前八十回抄本流傳，八十回後部分未完成且原稿佚失。原名《脂硯齋重評石頭記》。程偉元邀請高鶚協同整理出版百二十回全本[2] ，定名《紅樓夢》。亦有版本做《金玉緣》。</div>
  </div>
</div>

HTML部分如上，四個區塊，四大名著，嘎嘎

html,body{
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #58596b;
}
.container{
  width: 800px;
  height: 400px;
  margin: 100px auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.tab-wrapper{
  position: relative;
  width: 800px;
  height: 60px;
  background-color: #33344a;
}
.tab-wrapper .tab-radio{
  display: none;
}
.tab-handler{
  position: relative;
  z-index: 2;
  display: block;
  float: left;
  height: 60px;
  padding: 0 40px;
  color: #717181;
  font-size: 16px;
  line-height: 60px;
  transition: .3s;
  transform: scale(.9);
}
.tab-radio:checked + .tab-handler{
  color: #fff;
  background-color: #e74c3c;
  transform: scale(1);
}
.tab-radio:checked + .tab-handler + .tab-content{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.tab-wrapper .tab-content{
  visibility: hidden;
  position: absolute;
  top: 60px;
  left: 0;
  width: 740px;
  padding: 30px;
  color: #999;
  font-size: 14px;
  line-height: 1.618em;
  background-color: #fff;
  opacity: 0;
  transition: transform .5s, opacity .7s;
  transform: translateY(20px);
}

CSS代碼如上，寫的很爛，輕噴~
用visibility+opacity來控制元素的顯示和隱藏，其實是爲了實現動畫效果（此處有裝逼的嫌疑），由於display會阻礙transition，而visibility不會，另外也能夠用pointer-events+opacity來代替。

---

代碼就上面那些了，另附jsbin地址：http://output.jsbin.com/cicadu/4在新版opera/chrome/firefox測試完美，safari上面有嚴重問題，貌似切換了tab以後，tab內容塊的樣式已經應用瞭然而卻沒有生效，目測頁面沒有重繪？在開發者工具裏面將其focus一下才生效，具體緣由未知，有哪位大神知道的請不吝賜教。