vue项目点击图片切换
未选择的按钮class为detail-btn,选择后class为detail-btn detail-selected (注意图片变换下)html:<div class="detail-btn" @click="chooseOrder($event)"></div>css:.detail-btn{widt
·
未选择的按钮class为detail-btn,选择后class为detail-btn detail-selected (注意图片变换下)
html:
<div class="detail-btn" @click="chooseOrder($event)"></div>
css:
.detail-btn{
width: .43rem;
height: .45rem;
background: url(../images/list-no.png) no-repeat;
background-size: 98%;
}
.detail-selected{
background: url(../images/list-select.png) no-repeat;
background-size: 98%;
}
js:
chooseOrder:function(e){
if (e.target.className.indexOf("detail-selected") == -1) {
e.target.className = "detail-btn detail-selected"; //切换按钮样式
//写逻辑
} else {
e.target.className = "detail-btn";//切换按钮样式
//写逻辑
}
},
更多推荐
已为社区贡献6条内容
所有评论(0)