勾选框图片代替,两张图片进行切换

HTML代码:

<div class="agree">
<p class="UI-ask"></p>

</div>

js代码:

$(".agree>p").bind("click",function(){
if($(this).hasClass("UI-bubble")){
$(this).removeClass("UI-bubble").addClass("UI-ask");
}else{
$(this).removeClass("UI-ask").addClass("UI-bubble");
}
});

CSS:

.UI-ask{
display:inline-block;
15px;
height:15px;
overflow:hidden;
background:url(../img/goufang.png) 0px 0px no-repeat;
background-size:80%;
position:absolute;
left:5px;
top:5px;
}

.UI-bubble{
display:inline-block;
12px;
height:12px;
overflow:hidden;
background:url(../img/fang@2x.png) 0px 0px no-repeat;
background-size:100%;
position:absolute;
left:5px;
top:5px;
}

1
原文地址:https://www.cnblogs.com/hulaoxi/p/6903741.html