这种tab左右切换，使样式有左右滑动效果
html代码如下
<ul class="ui-tab-nav ui-tab-nav-three ui-border-b c0"> <li class="current" rel="launch">我发起的</li> <li class="" rel="partake">我参与的</li> <li class="" rel="like">我喜欢的</li> </ul>
这里使用的是frozenui的tab方法，我需要在ul上加上类名以知道当前在那个菜单上，附上js
var tab = new fz.Scroll(‘.ui-tab‘, { role: ‘tab‘, }); tab.on(‘beforeScrollStart‘, function(from, to) { $(".ui-tab-nav").removeClass("c"+from); $(".ui-tab-nav").addClass("c"+to); });
css样式代码，frozenui的样式不写了，写上默认的，我用的时候默认tab是两个，所以当3个的时候另外加了一个类名
ui-tab-nav-three
.ui-tab-nav:after{ content: ""; width: 50%; height: 2px; background: @common-color-red; display: block; overflow: hidden; position: absolute; left: 0; bottom:0; -webkit-transition: -webkit-transform 0.2s ease-out; } .ui-tab-nav.ui-tab-nav-three:after{width:33.33%;} .ui-tab-nav.c0:after{-webkit-transform: translate(0,0);} .ui-tab-nav.c1:after{-webkit-transform: translate(100%,0);} .ui-tab-nav.ui-tab-nav-three.c2:after{-webkit-transform: translate(200%,0);}
原文：http://www.cnblogs.com/snowbaby-kang/p/4936459.html