小程序切换标签改变样式

wxml中：

<view class="zixun"> 
	<view wx:for="{{ziXun}}" data-id="{{index}}" wx:key="key" bindtap="xuan" class="zi">
		<button class="{{index==id?'cha':'wen'}}">{{item}}</button>
	</view>
</view>

wxss中：

.zixun {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 4%;
}

.zi {
	border: 1px solid #1F467D; 			/* 使用1rpx会导致边框显示不完整，也可2rpx以上 */
	border-radius: 15rpx;
	width: 42%;
}

.wen {
	color: #1F467D;
	background-color: white;
}

.cha {
	color: white;
	background-color: #1F467D;
}

js中：

Page({
	data: {
		ziXun: [
			"免费问诊",
			"余号查询"
		],
		id: 1 									//默认选中第2个，下标为1
	},
	xuan:function(e){
		var id = e.currentTarget.dataset.id; 	//获取自定义id值
		this.setData({
			id : id
		})
	}
})

效果如下：