JQuery's operations on the class attribute implement the button switch Effect

In this article, we use JQuery's operations on the class attribute to implement the button switch effect on the page.

First, define two classes:
Copy codeThe 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 codeThe Code is as follows:
<A href = 'javascript: void (0) 'id = 'teachcontrol' class = 'controloff'> </a>

Then write the JS script to complete the switchover:
Copy codeThe 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 ");

}
}