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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 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 MSSQL 存储过程的方法
2008/12/24 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python实现微信好友的数据分析
2019/12/16 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
三年级班级文化建设方案
2014/05/04 职场文书
行政监察建议书
2014/05/19 职场文书
党员干部一句话承诺
2014/05/30 职场文书
团日活动总结模板
2014/06/25 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
公司年夜饭通知
2015/04/25 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
欠条格式范本
2015/07/03 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript