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; 
}

再定义一个超链接标签：

代码如下：

<a href='javascript:void(0)' id='teachControl' class='controlOff'></a>

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

代码如下：

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

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

} 
}