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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Javascript 类型转换方法
2010/10/24 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
Javascript实现字数统计
2015/07/03 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Python 可视化神器Plotly详解
2020/12/26 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
ktv总经理岗位职责
2014/02/17 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
践行三严三实心得体会
2014/10/13 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
单位综合评价意见
2015/06/05 职场文书
小学班主任心得体会
2016/01/07 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python