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

2019-11-20 21:54:10

字体：大中小

来源：转载

供稿：网友

在本文中用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"); 

} 
} 