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 相关文章推荐
js 固定悬浮效果实现思路代码
Aug 02 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
php 什么是PEAR?
2009/03/19 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python常见的格式化输出小结
2016/12/15 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python retrying模块的使用方法详解
2019/09/25 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python带参数打包exe及调用方式
2019/12/21 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
测量实习生自我鉴定
2013/09/19 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2015年库房工作总结
2015/04/30 职场文书
小学生教师节广播稿
2015/08/19 职场文书
2019广播稿怎么写
2019/04/17 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers