JQuery对class属性的操作实现按钮开关效果


Posted in Javascript onOctober 11, 2013

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

接着写JS脚本完成切换效果:
function switchTeachControl(){ 
var target = $("#teachControl"); 
if(target.hasClass("controlOff")){ 
target.removeClass("controlOff"); 
target.addClass("controlOn"); }else{ 
target.removeClass("controlOn"); 
target.addClass("controlOff"); 
} 
}
Javascript 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
限制只能输入数字的实现代码
May 16 Javascript
vue的mixins属性详解
Mar 14 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 #Javascript
javascript自然分类法算法实现代码
Oct 11 #Javascript
jQuery阻止事件冒泡具体实现
Oct 11 #Javascript
JS定时器实例详细分析
Oct 11 #Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 #Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 #Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
vue+element UI实现树形表格
2020/12/29 Vue.js
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python数据结构之翻转链表
2017/02/25 Python
理解python中生成器用法
2017/12/20 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
银行出纳岗位职责
2013/11/25 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
合作意向书范本
2019/04/17 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python