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 相关文章推荐
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
简单实现js拖拽效果
Jul 25 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
vue实现的请求服务器端API接口示例
May 25 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
php数组中包含中文的排序方法
2014/06/03 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP CURL使用详解
2019/03/21 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
django使用html模板减少代码代码解析
2017/12/12 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python学生管理系统的实现
2020/04/05 Python
HTTP状态码详解
2021/03/18 杂记
旅游管理专业生自荐信范文
2014/01/02 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
党代会心得体会
2014/09/04 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫