手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery对class属性的操作实现按钮开关效果
JQuery对class属性的操作实现按钮开关效果
摘要:在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果。首先定义两个class:复制代码代码如下:.controlOff{...

在本文中用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");

}

}

【JQuery对class属性的操作实现按钮开关效果】相关文章:

JQuery中DOM加载与事件执行实例分析

JQuery中两个ul标签的li互相移动实现方法

jQuery实现转动随机数抽奖效果的方法

javascript基于DOM实现权限选择实例分析

jQuery插件pagewalkthrough实现引导页效果

jQuery常用知识点总结以及平时封装常用函数

JQuery自动触发事件的方法

Jquery解析json字符串及json数组的方法

jQuery插件jRumble实现网页元素抖动

利用js实现禁止复制文本信息

精品推荐
分类导航