tab栏切换

最简单的tab栏切换

html部分

<ul class="tab">
            <li class="item">待支付（1）</li>
            <li class="item active">保障中（50）</li>
            <li class="item">已失效（50）</li>
</ul>

css部分

.policy_list_wrapper .tab {
                overflow: hidden;
                margin-bottom: .15rem;
                background: #fff;
                padding: .2rem;
                border-bottom: 1px solid #DDDDDD;
            }
            
            .policy_list_wrapper .tab .item {
                float: left;
                width: 33%;
                text-align: center;
                padding: .2rem 0;
            }

jquery部分

$('.tab .item').click(function(){
            $(this).addClass('active').siblings().removeClass('active')
        });

效果展示

再加一个

转载于:https://www.cnblogs.com/lml-lml/p/8691448.html