移动端自适应tab切换效果

通过jQuery与css过渡效果实现移动端tab切换，支持标题栏1至5个tab
// TODO
左右滑动时效果切换，显示的content通过marign-left来控制

三个tab代码示例

    
    
    

    



    html, body {
 position: relative;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow-x: hidden;
 font-size: 50px;
    }
    .xl-tab {
 position: relative;
 width: 100%;
    }
    .xl-tab-head {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: .7rem;
 box-sizing: border-box;
 text-align: center;
 line-height: .7rem;
 font-size: 0;
    }
    .xl-tab-head-title {
 display: inline-block;
 box-sizing: border-box;
 font-size: .24rem;
 border-right: 1px solid #f3f3f3;
 border-bottom: 1px solid #f3f3f3;
    }
    .xl-tab-head-title-active {
 border-bottom: 1px solid #fc7831;
    }
    .xl-tab-head-title-1 {
 width: 100%;
    }
    .xl-tab-head-title-2 {
 width: 50%;
    }
    .xl-tab-head-title-3 {
 width: 33.33%;
    }
    .xl-tab-head-title-4 {
 width: 25%;
    }
    .xl-tab-head-title-5 {
 width: 20%;
    }
    .xl-tab-content {
 position: absolute;
 top: .7rem;
 width: 100%;
 height: 100%;
 font-size: .24rem;
 text-align: center;
 line-height: 2;
    }
    .xl-tab-content-1 {
 margin-left: 0px;
    }
    .xl-tab-content-2 {
 margin-left: 100%;
    }
    .xl-tab-content-3 {
 margin-left: 200%;
    }
    .xl-tab-content-4 {
 margin-left: 300%;
    }
    .xl-tab-content-5 {
 margin-left: 400%;
    }
 .xl-tab-title-transition {
 -webkit-transition: background .3s ease;
 -moz-transition: background .3s ease;
 transition: background .3s ease;
    }
    .transition {
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 transition: all .3s ease;
    }



    
 
     tab1
     tab2
     tab3
 
 1
 2
 3