微信小程序tab栏切换

Wxml代码:
<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">公司新闻</view>
    <view class="{{selected3?'red':'default'}}" bindtap="selected3">员工风采</view>
  </view>
  <view class="{{selected?'show':'hidden'}}">for system</view>
  <view class="{{selected1?'show':'hidden'}}">for activity</view>
  <view class="{{selected2?'show':'hidden'}}">for activity</view>
  <view class="{{selected3?'show':'hidden'}}">for activity</view>
</view>

Wxss代码：
page {
  background-color: #edf0f3;
}

.nav {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
}

.default {
  line-height: 100rpx;
  text-align: center;
  flex:;
  border-right: 1px solid gainsboro;
  color: #000;
  font-weight: bold;
  font-size: 28rpx;
}

.red {
  line-height: 100rpx;
  text-align: center;
  color: #fc5558;
  flex:;
  border-right: 1px solid gainsboro;
  font-weight: bold;
  font-size: 28rpx;
}

.show {
  display: block;
  text-align: center;
  line-height: 200rpx;
}

.hidden {
  display: none;
  text-align: center;
  line-height: 200px;
}

JS片段

// pages/model/index.js

Page({

/**

* 页面的初始数据

*/

data: {

selected: true,

selected1: false,

selected2: false,

selected3: false

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

 

},

selected: function (e) {

this.setData({

selected1: false,

selected2: false,

selected3: false,

selected: true

})

},

selected1: function (e) {

this.setData({

selected: false,

selected2: false,

selected3: false,

selected1: true

})

},

selected2: function (e) {

this.setData({

selected: false,

selected1: false,

selected3: false,

selected2: true

})

},

selected3: function (e) {

this.setData({

selected: false,

selected2: false,

selected1: false,

selected3: true

})

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})