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 相关文章推荐
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
理解javascript中的严格模式
Feb 01 Javascript
AngularJS指令用法详解
Nov 02 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP Stream_*系列函数
2010/08/01 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
详解package.json版本号规则
2019/08/01 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python实现批量注册网站用户的示例
2019/02/22 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
乔迁之喜主持词
2014/03/27 职场文书
超市员工辞职信范文
2015/05/12 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Python3 类型标注支持操作
2021/06/02 Python
详解Python自动化之文件自动化处理
2021/06/21 Python