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中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
set_include_path在win和linux下的区别
2008/01/10 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
js 居中漂浮广告
2010/03/21 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
详解python时间模块中的datetime模块
2016/01/13 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
5款非常棒的Python工具
2018/01/05 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
美丽乡村建设实施方案
2014/03/23 职场文书
植树节活动总结
2014/04/30 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Python打包为exe详细教程
2021/05/18 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers