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

最新推荐文章于 2025-04-10 16:46:20 发布

张cccccyc是我

最新推荐文章于 2025-04-10 16:46:20 发布

阅读量739

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery效果 js网页常用效果文章标签： jquery html 手机淘宝网

本文链接：https://blog.youkuaiyun.com/qq_29783621/article/details/74006982

jquery效果同时被 2 个专栏收录

9 篇文章

订阅专栏

js网页常用效果

9 篇文章

订阅专栏

本文介绍了一种基于jQuery实现的Tab切换效果，该效果模仿了手机淘宝中的收发货状态切换，通过平滑切换下划线的方式实现了下划线长度随文字长度变化的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");
});