点击选中当前按钮，加class类名（改变背景颜色字体-active的运用）

目的：当页面存在多个标签按钮时，点击选中当前按钮时，当前按钮的背景色及字体颜色发生改变。
效果如图：

xmL部分代码如下：

<view class="optional_title">{{optional_title}}</view>
  <!-- 标签部分 -->
<view class="optional_tags">
       <button class="tag_btns {{state==index?'active':''}}" wx:for="{{optional}}" wx:key="index" data-id="{{index}}" bindtap="changeColor">{{item.optionalnav}}</button>
 </view>

css部分代码如下：

.optional_title{
  font-family: PingFang-SC-Medium;
  font-size: 24rpx;
  color: #696969;
  line-height: 24rpx;
}
.optional_tags{
  margin-top: 25rpx;
}
.tag_btns{
  display: inline-block;
  border: none;
  outline: none;
  background: #F1F1F1;
  border-radius: 6rpx;
  padding: 14rpx 20rpx;
  font-size: 24rpx;
  color: #696969;
  letter-spacing: 0;
  text-align: center;
  line-height: 24rpx;
  margin:0 18rpx 18rpx 0;
}

js部分代码如下：

// 点击标签按钮改变样式
data:{
	optional_title:"可选标签",
	optional:[
      {
        optionalnav:"套箱",
      },
      {
        optionalnav: "拼箱",
      },
      {
        optionalnav: "外发装箱",
      },
      {
        optionalnav: "重箱进港",
      },
      {
        optionalnav: "空箱",
      },
      {
        optionalnav: "空箱业务",
      },
    ],
	state:""
},
 changeColor: function (e) {
   console.log('选中元素的下标', e.currentTarget.dataset.id)
   console.log('选中的元素', this.data.optional[e.currentTarget.dataset.id].checked)
   this.setData({
     state: e.currentTarget.dataset.id,
   });
 },