通过jQuery与css过渡效果实现移动端tab切换,支持标题栏1至5个tab
// TODO
左右滑动时效果切换,显示的content通过marign-left来控制
三个tab代码示例
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



