jQuery toggle()设置CSS样式


Posted in Javascript onNovember 05, 2009

toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
---------------------------------
示例
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
$("p").toggle()
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
设置背景图片,以突出透明度的效果

<head> 
<title>toggle()</title> 
<style type="text/css"> 
<!-- 
body{ 
background:url(bg.jpg); 
margin:20px; padding:0px; 
} 
img{ 
border:1px solid #FFFFFF; 
} 
--> 
</style> 
<script language="javascript" src="jquery.min.js"></script> 
<script language="javascript"> 
$(function(){ 
$("img").toggle( 
function(oEvent){ 
$(oEvent.target).css("opacity","0.5"); 
}, 
function(oEvent){ 
$(oEvent.target).css("opacity","1.0"); 
} 
); 
}); 
</script> 
</head> 
<body> 
<img src="test.jpg"> 
</body>
Javascript 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
js编写的treeview使用方法
Nov 11 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
javascript 打印内容方法小结
Nov 04 #Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 #Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 #Javascript
jQuery 加上最后自己的验证
Nov 04 #Javascript
javascript Math.random()随机数函数
Nov 04 #Javascript
jquery animate 动画效果使用说明
Nov 04 #Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python程序运行原理图文解析
2018/02/10 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python类的动态绑定实现原理
2020/03/21 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
信用社主任竞聘演讲稿
2014/05/23 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
党员示范岗材料
2014/12/19 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL