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复制对象使用说明
Jun 28 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
JS的深浅复制详细
Oct 16 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
php GeoIP的使用教程
2011/03/09 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
实例讲解PHP表单
2020/06/10 PHP
告诉大家什么是JSON
2008/06/10 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
express 项目分层实践详解
2018/12/10 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Python中常用信号signal类型实例
2018/01/25 Python
分析python请求数据
2018/08/19 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
2014年班主任工作总结
2014/11/08 职场文书
解除租房协议书
2014/12/03 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS