tab 切换实现方法

Posted 2020-09-22 礼拜16

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