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;
}
再定义一个超链接标签：
<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");
}
}
首先定义两个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");
}
}
相关文章
这篇文章主要介绍了jQuery动态生成表格及右键菜单功能,结合实例形式分析了jQuery表格的动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了jQuery中:animated选择器用法,实例分析了:animated选择器的功能、定义及匹配动画效果元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
老规矩，先上html和css,还是用官方的，只是去掉了些东西2012-07-07
jquery通过select列表选择框对表格数据进行过滤示例
这篇文章主要介绍了jquery通过select列表选择框对表格数据进行过滤示例,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery选择器源码解读（一）：Sizzle方法,本文用详细的注释解读了Sizzle方法的实现源码,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了jQuery实现弹弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
jquery的东西也算不少，记下来有助于以后参考。这样也挺方便。2010-11-11
这篇文章主要介绍了jQuery中的过滤元素操作。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了jQuery 基础选择器与属性选择器，选择所有元素,此选择器使用要慎重，其速度是极其慢的，详细介绍内容需要的小伙伴可以参考一下下面文章内容2022-08-08
这篇文章主要介绍了EasyUI中在表单提交之前进行验证的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
最新评论