JQuery operation on the class attribute to achieve the button switch effect

  • 2020-03-26 21:26:35
  • OfStack

In this article, the class attribute operation method of JQuery is used to achieve the button switch effect in the page.

First define two classes:
 
.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; 
} 

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

Then write JS script to complete the switching effect:
 
function switchTeachControl(){ 
var target = $("#teachControl"); 
if(target.hasClass("controlOff")){ 
target.removeClass("controlOff"); 
target.addClass("controlOn"); 

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

} 
} 

Related articles: