• ul li 實現方法（只適用於，一個頁面只有一組ul>li）

<!--menu-->
<div class="nav">
    <ul class="nav-box">
        <li class="nav-active">Why SecurityONE</li>
        <li class="nav-title">Feature</li>
    </ul>
</div>
<!--content-->
<div class="content-tab-box"
 
>
    <ul class="page-box">
                <li style="display: block;" class="roleRight animated">內容</li>
                <li style="display: none;" class="roleRight animated">內容</li>
        </ul>
</div>

//一個頁面只適用一個，不適合多次使用
function tab(list, box) {
    list.bind(
 
"click", function() {
        var index = $(this).index();
        $(this).parent().children("div").attr("class", "pro-btn");
        $(this).attr("class", "pro-btn-active");
        box.hide();
        box.eq(index).show();
    });
}

• input radio（只適用於，一個頁面只有一組div>(input+radio)*n）

demo: http://output.jsbin.com/cicadu/4

<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>
</div>

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

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);
}

tab 切換實現方法