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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
javascript屏蔽右键代码
May 15 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
微信小程序实现全国机场索引列表
2018/01/31 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Pandas分组与排序的实现
2019/07/23 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
python中p-value的实现方式
2019/12/16 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
创意广告词
2014/03/17 职场文书
管理建议书范文
2014/05/13 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
李培根演讲稿
2014/05/22 职场文书
销售求职信范文
2014/05/26 职场文书
大学迎新标语
2014/06/26 职场文书
员工培训协议书
2014/09/15 职场文书
校园运动会广播稿
2015/08/19 职场文书