JQuery对class属性的操作实现按钮开关效果

162 阅读 0 评论 107 点赞

我是靠谱客的博主清爽睫毛膏，最近开发中收集的这篇文章主要介绍JQuery对class属性的操作实现按钮开关效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果。

首先定义两个class：

复制代码代码如下:

 
.controlOff{ 
display:inline-block; 
width:130px; 
height:36px; 
cursor:pointer; 
background-image:url("../iclass/images/teach_off.png"); 
background-repeat: no-repeat; 
} 

.controlOn{ 
display:inline-block; 
width:130px; 
height:36px; 
cursor:pointer; 
background-image:url("../iclass/images/teach_on.png"); 
background-repeat: no-repeat; 
} 

再定义一个超链接标签：

复制代码代码如下:

接着写JS脚本完成切换效果：

复制代码代码如下:

 
function switchTeachControl(){ 
var target = $("#teachControl"); 
if(target.hasClass("controlOff")){ 
target.removeClass("controlOff"); 
target.addClass("controlOn"); 

}else{ 
target.removeClass("controlOn"); 
target.addClass("controlOff"); 

} 
} 