tab页面的布局和效果实例（一）

tab布局在页面的应用是非常常见

上图是我项目中的一个tab页面布局，先看看布局代码：

1. 页面html布局

<ul class="tab-title">
<li class="tb-active">充卡</li>
<li class="">进卡</li>
<li class="">客服赠送</li>
<li class="">系统赠送</li>
</ul>
<div id="giveCard" class="tab-content active">
<div class="total">共充卡<span class="total-value">0</span>张</div>
<ul class="content-ul">

</ul>
<div class="more-data">加载更多</div>
</div>
<div id="inCard" class="tab-content">
<!--<div class="total">共进卡<span>800</span>张</div>-->
<ul class="content-ul">

</ul>
<div class="more-data">加载更多</div>
</div>
<div id="kefu" class="tab-content">
<ul class="content-ul">

</ul>
</div>
<div id="system" class="tab-content">
<ul class="content-ul">
<li style="text-align:center;display: block">暂无数据O(∩_∩)O</li>
</ul>
</div>

1. css代码(less代码，可以使用工具其转换为css)

.tab{
  padding: 1rem;
  .tab-title{
    display: flex;
    justify-content: center;
    text-align: center;
    li{
      width: 100%;
      padding: 1rem;
      border-bottom: 1px solid #eeeeee;
    }
    .tb-active{
      border-bottom: 1px solid #0BA18E;
    }
  }

  .tab-content{
    width: 100%;
    padding: 1rem 0rem;
    display: none;
    table{
      width: 100%;
    }
    .table-t{
      display: flex;
      justify-content: center;
      text-align: center;
      th,td{
        width: 100%;
      }
      td{
        line-height: 2.5rem;
      }
    }
    .total{
      text-align: center;
      padding: 1rem 0rem;
      span{
        color: red;
      }
    }
    .content-ul{
      width: 100%;
      li{
        padding: 1rem;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        justify-content: space-between;
        .li-desc{
          p:first-child{
            color: #999;
        }
          p:last-child{
            color: #999;
          }
        }
      }
      li:last-child{
        border-bottom: none;
      }

    }
    .more-data{
      text-align: center;
      display: none;
    }
  }

  .active{
    display: block;
  }

}

1. javascript效果切换部分。

$('.tab-title li').click(function () {
    var index = $(this).index();
    $(this).siblings().removeClass('tb-active');
    $(this).addClass('tb-active');
    $('.tab-content').removeClass('active');
    $('.tab-content').eq(index).addClass('active');
})

以上tab页面布局和js效果部分代码。