最简单的tab栏切换

html部分

    
            
     
待支付（1）
            
     
保障中（50）
            
     
已失效（50）
    

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

效果展示

再加一个