<view class="body">

  <view class="nav bc_white">

    <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>

    <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>

    <view class="{{selected2?'red':'default'}}" bindtap="selected2">123</view>

  </view>

  <view class="{{selected?'show':'hidden'}}">for system</view>

  <view class="{{selected1?'show':'hidden'}}">for activity</view>

  <view class="{{selected2?'show':'hidden'}}">for activsadity</view>

</view>

page {

  background-color: rgb(243,243,243);

}

.nav {

  width: 100%;

  height: 80rpx;

  display: flex;

  flex-direction: row;

  background: #fff;

  justify-content: space-around;

}

.nav view {

  width: 180rpx;

  text-align: center;

}

.default {

  line-height: 80rpx;

  text-align: center;

  color: #000;

  font-weight: bold;

  font-size: 30rpx;

}

.red {

  line-height: 80rpx;

  text-align: center;

  color: rgb(0, 192, 10);

  font-weight: bold;

  font-size: 30rpx;

  border-bottom: 4rpx solid rgb(0, 192, 10);

}

.show {

  display: block;

  text-align: center;

}

.hidden {

  display: none;

  text-align: center;

}

 data: {

    selected: true,

    selected1: false

  },

  selected: function (e) {

    this.setData({

      selected1: false,

      selected2: false,

      selected: true

    })

  },

  selected1: function (e) {

    this.setData({

      selected: false,

      selected2: false,

      selected1: true

    })

  },

  selected2: function (e) {

    this.setData({

      selected: false,

      selected2: true,

      selected1: false

    })

  },