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

更新时间：2013年10月11日 16:57:38 作者：

页面中的按钮开关效果想必大家都有见到过吧，接下来为大家详细介绍下如何使用JQuery对class属性的操作方法实现，感兴趣的朋友不要错过

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

再定义一个超链接标签：

复制代码代码如下:

接着写JS脚本完成切换效果：

复制代码代码如下:

 
function switchTeachControl(){ 
var target = $("#teachControl"); 
if(target.hasClass("controlOff")){ 
target.removeClass("controlOff"); 
target.addClass("controlOn"); 

}else{ 
target.removeClass("controlOn"); 
target.addClass("controlOff"); 

} 
} 

您可能感兴趣的文章:

基于JQuery的列表拖动排序实现代码
基于JQuery的拖动插件有几个都相当好用，效果也很好，但再好，还是自己琢磨一个最好。所以，我的理念就是即使实际项目中使用别人的程序，自己也得根据自己的理解和想法写一个出来。那么今天，就来看看我的思路是不是可以实现拖动排序的功能
2013-10-10
checkbox 选中一个另一个checkbox也会选中的实现代码
本文给大家带来了checkbox选择器之checkbox 选中一个另一个checkbox也会选中的实现代码，非常不错，有需要的可以参考下
2016-07-07
jquery 将当前时间转换成yyyymmdd格式的实现方法
下面小编就为大家带来一篇jquery 将当前时间转换成yyyymmdd格式的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考
2016-06-06
jquery ajax提交表单数据的两种实现方法
貌似AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要“随波逐流”一把，不然饭碗不保啊！
2010-04-04
jsTree 基于JQuery的排序节点 Bug
jsTree(JQuery) 排序节点 Bug的解决方法。
2011-07-07
jquery操作ID带有变量的节点实例
下面小编就为大家带来一篇jquery操作ID带有变量的节点实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
jQuery控制元素隐藏和显示
本篇文章主要介绍了jQuery控制元素隐藏和显示的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
jquery tools系列 expose 学习
不知不觉，已经进行到了jquery tools六大功能的第五个功能——expose的学习了，废话不多说，直接进入正题。
2009-09-09
jQuery队列操作方法实例
这篇文章主要介绍了jQuery队列操作方法实例,总结出了一个简洁优雅的队列控制方法,需要的朋友可以参考下
2014-06-06
jQuery Chart图表制作组件Highcharts用法详解
这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下
2016-06-06