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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
基于JavaScript实现数码时钟效果
Mar 30 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
Python的装饰器用法学习笔记
2016/06/24 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python使用requests.session模拟登录
2019/08/09 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
计算机本科生自荐信
2013/10/15 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
校园文明倡议书
2014/05/16 职场文书
2014年部门工作总结
2014/11/12 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
灵魂歌王观后感
2015/06/17 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书