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

效果展示

再加一个