下划线tab切换仿手机淘宝收发货

tab切换仿手机淘宝收发货

tab平滑切换下划线，下划线长度可以随文字长度更改。
基于jQuery。

贴效果图

html

结构上，一定要给文字套一个行内标签例如span,这样方便获取字符长度。然后下划线效果用绝对定位来弄，如果用border的话，效果不容易实现

<div class="box">
    <div class="clearfix">
        <p class="fl active"><span>一</span></p>
        <p class="fl"><span>尔尔</span></p>
        <p class="fl"><span>三三三</span></p>
        <p class="fl"><span>思思思思</span></p>
    </div>
    <div class="underline"></div>
</div>

css

最外层用相对定位，下划线初始宽度要给零

.box{position: relative;}

/*下划线*/
.box .underline{border-bottom: 3px solid #10adff;position: absolute;bottom: 0;width: 0;}
.box div.clearfix {line-height: 2.2rem;height: 2.2rem;position: relative;box-sizing: border-box;}
.box div a,.im_tab div p {height: 2.2rem;font-size:0.7rem;text-align:center;width: 50%;position: relative;box-sizing: border-box;background: #fff;}
.box div a:first-child,.im_tab div p:first-child {}
.box div a.active,.im_tab div p.active {color: #10adff;  background-color: #fff;overflow: hidden;}

.box div p.active a{ color: #10adff;    background: none;}

js

用active做标记

//tab初始状态
function initTab(){
    if($("div").hasClass("box") ){
        var tabW = $(".box .active span").width();
        var tabOff =  $(".box .active span").offset().left;
        $(".underline").css({"left":tabOff,"width":tabW});
    }
}
initTab();
//点击切换效果
$(".box p").click(function() {
    //获取字府串宽度
    var tabW = $(this).find("span").width();
    //获取距窗口位移
    var tabOff = $(this).find("span").offset().left;
    //下划线效果
    $(this).addClass("active").siblings().removeClass("active");
});