JSP页面中JQ实现---当点击按钮的时候，改变原来样式，内容也发生改变，再次点击变成原来的样子

在网上找了很久，都是一些乱七八糟的代码，不能直接切入主题，所以只有自己亲自写了，废话不多说了，直接上代码

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类的样式就行

效果图：

没有点击的样子



点击一次的样子



再次点击