用伪元素和jquery实现tab标签切换（下标线样式）

邵邵邵

于 2025-03-11 18:12:26 发布

阅读量251

点赞数 3

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_45791799/article/details/146185692

版权

HTML代码

<div class="title">
    <div class="tab-item active">按场景</div>
    <div class="tab-item">按名称</div>
    <div class="tab-item">按手机号</div>
</div>

CSS代码

.active{
        position: relative;
       }//这里要给active设置相对定位，‌因为绝对定位是相对于最近的已定位祖先元素进行定位，否则就按照浏览器视图来定位了。
.active:after{
            content:"";
            position:absolute;
            bottom: 0px;
            width:0.7rem;
            height: 0.07rem;
            background-color: #339fff;
        }

JQuery代码

$('.tab-item').on('click',function(){
        $('.tab-item').each(function(){
            $(this).removeClass('active')
        })//先遍历一下把所有的tab-item上的active样式都去掉
        $(this).addClass('active')//再给当前的这个tab-item加上active样式
  })