微信小程序动态切换class类名

之前用jquery时我们可以使用：

$(".classify").eq(0).addClass("addStyleMi").siblings().removeClass("addStyleMi");

动态的为元素切换类名，添加css样式。

但是微信小程序中不提供操作Dom的方法，但我们也可以实现为元素动态切换类名。

效果图：

            

                  图1                                                                        图2

                 重点是这句代码 

下面是完整的代码：

js:

data: {
    // --------二级分类---------
    first_names:[
      {
        "id":1,
        "goods_name":"食品土特产"
        },
      {
        "id":2,
         "goods_name": "健康器械"
          },
      { 
        "id":3,
        "goods_name": "营养保健" 
        
        },
      {
        "id": 4,
        "goods_name": "健康调理"

      },
      {
        "id": 5,
        "goods_name": "保护眼睛"

      },
      {
        "id": 6,
        "goods_name": "骨骼健康"

      },
      {
        "id": 7,
        "goods_name": "滋补养生"

      },
      {
        "id": 8,
        "goods_name": "增强免疫"

      },
      {
        "id": 9,
        "goods_name": "国内旅游"

      },
    ],
    first_id:0,//用于判断是否是当前选中的
   
    
  },
 // -------动态切换class---------
  menuClick: function (e) {
    var that = this;
    var index = e.currentTarget.dataset.index;//获取当前点击的元素下标
    console.log(index);
    that.setData({
      first_id: index
    })
  },

wxml:(scroll-view用于滑动)

  
    
      {{first_names.goods_name}}
    
  

wxss:

/* 分类开始 */
.moreBoxs{
    width: 100%;
    height: 102rpx;
    border-bottom: solid 2rpx #e5e5e5;
    position: fixed;
    top: 0;
    background-color: #ffffff;
    z-index: 500;
}

.navContent{
    width: 100%;
    height: 102rpx;
    white-space: nowrap;
}
.classify {
	height: 102rpx;
	/*width: 8%;*/
	margin-left: 42rpx;
	line-height: 102rpx;
	text-align: center;
	
	font-size: 28rpx;
  display: inline-block;
}

.addStyleMi {
	height: 96rpx;
	border-bottom: solid 6rpx #eb3737;
	font-weight: bold;
	color: #eb3737;
	font-size: 28rpx;
}
/* ---------隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}