在本文中用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'></a>

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

复制代码 代码如下:

function switchTeachControl(){

var target = $("#teachControl");

if(target.hasClass("controlOff")){

target.removeClass("controlOff");

target.addClass("controlOn");

}else{

target.removeClass("controlOn");

target.addClass("controlOff");

}

}