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

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;
width: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;
width:12px;
height:12px;
overflow:hidden;
background:url(../img/fang@2x.png) 0px 0px no-repeat;
background-size:100%;
position:absolute;
left:5px;
top:5px;
}

转载于:https://www.cnblogs.com/hulaoxi/p/6903741.html