在网上找了很久,都是一些乱七八糟的代码,不能直接切入主题,所以只有自己亲自写了,废话不多说了,直接上代码
JSP页面代码,关键代码我给各位直接拿出来了,这样便于好看
<div class="fc-asset-title">
<span class="fc-follow-button"> + FOLLOW </span>
</div>
Jq代码
<aui:script>
jQuery( function(){
var followButton = $(".fc-asset-title .fc-follow-button"); //把获取到的类提取出来,简化代码,传给followButton
followButton.click(function() {
if (followButton.hasClass("fc-following")) { //hasClass来判断 followButton中是否有类:fc-following,如果有返回true
followButton.removeClass("fc-following"); //如果有fc-following类,移除
followButton.html("+ FOLLOW"); //内容变成+ FOLLOW
}
else {
followButton.addClass("fc-following"); //如果没有添加fc-following类
followButton.html("√ FOLLOWING"); //内容变成√ FOLLOWING
}
});
});
</aui:script>
CSS代码就不上贴了,根据个人习惯,只要写出fc-following类的样式就行
效果图:
没有点击的样子
点击一次的样子
再次点击