jquery点击改变class并toggle的实现代码
jquery点击改变class并toggle的实现代码
<html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <style> .bg1 { background-image:url(images/21.jpg); background-repeat:no-repeat; color:#0CF; } .bg2 { background-image:url(images/22.jpg); background-repeat:no-repeat; color:#F00; } </style> <script type="text/javascript"> //参数para1:希望隐藏元素的id值 function toggle1(para1){ if ($("#p2").attr("class")=="bg1") { $("#p2").attr("class","bg2"); } else { $("#p2").attr("class","bg1"); } $("#"+para1).toggle(); } </script> </head> <body> <p id="p1">此处将显示或隐藏</p> <p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">点击此处显示或隐藏上面部分并更换自己的样式(包括背景图、字体等)</p> </body> </html>
以上这篇jquery点击改变class并toggle的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery 中toggle的2种用法详解(推荐)
一.在元素的click事件中绑定两个或两个以上的函数 toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发), 如下实例: <input id="btntest" type="button" value="点一下我" /> <div>我是动态显示的</div> <script type="
-
jquery中show()、hide()和toggle()用法实例
本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc
-
jquery中toggle函数交替使用问题
html中有几个btn触发toggle函数,想要实现的功能是:点击每个toggle时将其他toggle函数的计数全部清零,试过removedata不起作用,是否有更好的办法呢 给大家一个实例来参考下吧 请参考这个:jsp页面 <li> <label class="labelText">统计类型:</label> <span class="sortBox"> <a href="javascript:;&q
-
jQuery toggle 代替方法
具体内容如下所示: $('.back_left dt').toggle(function(){ $(this).addClass("selected"); $(this).siblings('dd').slideUp(); },function(){ $(this).removeClass("selected"); $(this).siblings('dd').slideDown(); }); 今天在做一个项目,抄了别人网站上的一代码,发现怎么都无法实现,在我急得不
-
用jQuery toggleClass 实现鼠标移上变色
按钮移上变色效果 复制代码 代码如下: <style> .round-corner-btn { -moz-border-radius:4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; width:200px; height:40px; line-height: 40px; background: green; display:inline-block; color:white; tex
-
jQuery中hover方法和toggle方法使用指南
jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 参数: over (Function) : 鼠标移到元素上要触发的函数. out (Function): 鼠标移出元素要触发的函数. 复制代码
-
jQuery中toggleClass()方法用法实例
本文实例讲述了jQuery中toggleClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法对添加或移除匹配元素的一个或多个类进行切换. toggleClass()方法检查匹配元素中指定的类.如果不存在则添加类,如果已设置则删除之.这就是所谓的切换效果. 语法结构一: 复制代码 代码如下: $(selector).toggleClass(class,switch) 如果存在(不存在)就删除(添加)一个类. 参数列表: 参数 描述 class 规定添加或删除的类. 如果需要添加多个
-
jquery点击改变class并toggle的实现代码
jquery点击改变class并toggle的实现代码 <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
-
jQuery点击改变class并toggle及toggleClass()方法定义用法
我滴古老风格,废话不多说,贴代码了. <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <style
-
Jquery 点击按钮显示和隐藏层的代码
代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"
-
JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)
复制代码 代码如下: /* 对页面上的字体增大.缩小.恢复原始大小 需要在html页面中定义三个元素 元素的class分别为 resetFont.increaseFont.decreaseFont 在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大.缩小.恢复原始大小 */ $(function () { //取得字体大小,在html标记下定义了font-size var originalFontSize = $("html").css("font-si
-
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置.代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>函数传参,改变Div任意属性的值</title> <style type="text/css"> body,p{margin:0;padding:0;} bo
-
jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了. 二.代码 HTML: <div class="select_box" id="selected"> <div class="select"> <sp
-
jquery点击缩略图切换视频播放特效代码分享
本文实例讲述了jquery点击缩略图切换视频播放特效.分享给大家供大家参考.具体如下: jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery点击缩略图切换视频播放特效代码如下 <!DOCTYPE html
-
jQuery点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
-
jquery点击切换背景色的简单实例
刚在自己的前端技术群里有个小伙伴儿问到这个问题,点击的时候进行红色背景和白色背景的切换,然后我就临时想到了一个解决方法,在这里记录一下吧,希望还有别的刚学习前端的小伙伴儿能用到,大神就请绕道咯!另外提一下,自己这个前端群都是一群热爱前端的小伙伴儿,如果你是一个人在自学的话,不妨来加入我们,把你遇到的前端问题尽管扔进群里哦,小伙伴儿们看到了会给你耐心解答的哦! 不说了,上代码: <!DOCTYPE html> <html> <head> <style> .bo
-
jQuery点击其他地方时菜单消失的实现方法
本文实例讲述了jQuery点击其他地方时菜单消失的实现方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation();//停止冒泡 非ie else e.cancelBubble = true;//停止冒泡 ie } $(document).bind('click',function(){
随机推荐
- linux下mysql开启远程访问权限 防火墙开放3306端口
- Restart.vbs源代码可以重启远程电脑的vbs
- AngularJS Select(选择框)使用详解
- js判断当页面无法回退时关闭网页否则就history.go(-1)
- 一个挺有意思的Javascript小问题说明
- VBS教程:VBScript 语句-Sub 语句
- [.net] 操纵自如-页面内的配合与通信
- php实现的二分查找算法示例
- thinkPHP实现的联动菜单功能详解
- JavaScript 总结几个提高性能知识点(推荐)
- 详解Mysql case then使用
- 得到jQuery detach()后节点中的某个值实现代码
- JavaScript实现梯形乘法表的方法
- Java TokenProcessor令牌校验工具类
- C#实现的Excel文件操作类实例
- 浅析PHP水印技术
- C++ 中消息队列函数实例详解
- C#使用FileStream对象读写文件
- .net core webapi jwt 更为清爽的认证详解
- thinkPHP+LayUI 流加载实现功能