JQuery はクラス属性を操作してボタン スイッチのエフェクトを実現します。

この記事では、JQuery を使用してクラス属性を操作し、ページ上のボタン切り替え効果を実現します。

最初に 2 つのクラスを定義します。

コードをコピーします コードは次のとおりです:

.controlOff{
表示:インラインブロック;
高さ:36ピクセル;
背景画像:url("../iclass /images/teach_off.png");
background-repeat: no-repeat;
}

.controlOn{
display:inline-block;
width:130px;
高さ:36px;
カーソル:ポインタ;
背景-繰り返し: 繰り返しなし
}


別のハイパーリンク タグを定義します:

コードをコピーします コードは次のとおりです:

次に JS を記述します切り替え効果を完了するためのスクリプト:

コードをコピー コードは次のとおりです: function switchTeachControl (){

var target = $( "#teachControl");

if(target.hasClass("controlOff")){
target.removeClass("controlOff"); ("controlOn");

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

}
}