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正则表达式获取分组内容的方法详解
Nov 15 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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程序--记数器
2006/10/09 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python中return self的用法详解
2018/07/27 Python
老生常谈python中的重载
2018/11/11 Python
python中类的属性和方法介绍
2018/11/27 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python 模拟登陆github的示例
2020/12/04 Python
python基于opencv实现人脸识别
2021/01/04 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
市场专员岗位职责
2014/02/14 职场文书
化工实习心得体会
2014/09/09 职场文书
销售经理岗位职责
2015/01/31 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python