小程序切换样式的问题？
发布于 6 年前 作者 minyin 6481 次浏览 来自 问答

如图：当鼠标点击标签以后把当前点击的样式换成红色背景+白色字体的样式。其他的标签还是默认灰色背景+黑色字体，jq里面用addClass()和removeClass()就可以实现了，但是在小程序上没有dom操作，真不知道怎么实现这个效果。。求解？？



7 回复

你这样的话，点击会同时改变样式哦，我只要点击当前的view改变样式而已哦！

一楼这样讲新手怎么会懂。。

我给你个思路，如果你点击的id值等于列表index值，就给这个加个类

<view class="{{id==index？‘class1’:‘class2’}}"></view>

楼主入世尚浅啊

8楼正解，希望小程序早点解决这个问题

一楼 都讲错了  明明引入的是class  设值的时候竟然设成css样式    不应该是class类名吗？？

好吧  就算你设的是class类名 ，那你 red 总该被引号引起来吧，，对于楼主这样的小白来说   你这样反而误导他


view层：

<view  bindtap=“changeColor”  class="{{ color }}" >  点击我改变颜色样式 </view>


CSS:

// 比如color1是原先预设的样式

.color1:{background-color：white;color:black;}

// color2将是你要引用的类名

.color2:{background-color：red;color:white;}


JS：

Page({

  data: {

   color ："color1"

  },

changeColor:function(){

    this.setData({ color : "color2 " })

}

}）

用变量，js里改变变量值

<div class="{{color}}">

js

this.setData({

color:red

})

回到顶部