JQuery operates on class attributes to achieve button switch effect_jquery

In this article, JQuery is used to operate the class attribute to achieve the button switch effect on the page.

First define two classes:

Copy the code The code is as follows:

.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:

Copy the code The code is as follows:

Then write the JS script to complete the switching effect:

Copy code The code is as follows:

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

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

}
}