<view class="tab-left" bindtap="tab">

  <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view>

  <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view>

  <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view>

  <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view>

</view>  

<view class="tab-right">

  <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>

  <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>

  <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>

  <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>

</view>

</view>

Page( {

data: {

  tabArr: {

    curHdIndex: 0,

    curBdIndex: 0

  },

},

 /**

     * tab切换

     */

    tab: function(e) {

        var dataId = e.currentTarget.id;

        var obj = {};

        obj.curHdIndex = dataId;

        obj.curBdIndex = dataId;

        this.setData({

            tabArr: obj

        })

    },