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");

}
}

赞 (0)

相关推荐

  • javascript结合CSS实现苹果开关按钮特效

    javascript结合CSS实现苹果开关按钮特效

    苹果开关按钮效果~~ 关闭时                                      开启时 html 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>apple button</title> </head> <body>  

  • label+input实现按钮开关切换效果的实例

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q

  • 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{ displa

  • jquery选择器和属性对象的操作实例分析

    本文实例讲述了jquery选择器和属性对象的操作.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script typ

  • jquery更改元素属性attr()方法操作示例

    本文实例讲述了jquery更改元素属性attr()方法.分享给大家供大家参考,具体如下: jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写, 是js中setAttribute()和getAttribute()的简化 最基本常用的用法: $("img").attr("src","img/a.jpg"); $("img").attr("width","1

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如

  • jQuery表单对象属性过滤选择器实例详解

    jQuery表单对象属性过滤选择器实例详解

    本文实例讲述了jQuery表单对象属性过滤选择器.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11</title> <script src="jquery-1.7.2.min.js" type="t

  • jquery对dom节点的操作【推荐】

    1.JavaScript脚本放在哪里才好? 1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本,我们可以将脚本放在HTML的head部分中,这样可以保证脚本在任何调用之前已经被加载. 2.当页面加载时 需执行的脚本可以放在HTML的body部分,这类脚本通常被用来生成页面的内容. 3.当页面加载后 需立即执行的脚本,我们可以放在最后,文档加载之后执行.所幸的是,Jquery有事件控制,所以,这部分我们可以下载 head 引用的外部文件中. 2.jquery的常用函数 如:children

  • jQuery根据name属性进行查找的用法分析

    本文实例讲述了jQuery根据name属性进行查找的用法.分享给大家供大家参考,具体如下: $("div[id]") //选择所有含有id属性的div元素 $("input[name='newsletter']") //选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']") //选择所有的name属性不等于'newsletter'的input元素 $("input

  • jQuery.Form上传文件操作

    建立test文件夹 PHP代码: <?php //var_dump($_FILES['file']);exit; if(isset($_GET['option']) && $_GET['option']=='delete'){ @file_put_contents(dirname(__FILE__)."/------------0.txt", $_GET['path']."\r\n",FILE_APPEND); unlink($_GET['pa

  • jQuery原理系列-常用Dom操作详解

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

随机推荐