jQuery toggle()设置CSS样式

2016-02-19 14:37 10 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享jQuery toggle()设置CSS样式吧。

【 tulaoshi.com - Web开发 】

toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
---------------------------------
示例
切换所有段落的可见状态。
HTML 代码:
pHello/pp style="display: none"Hello Again/p
jQuery 代码:
$("p").toggle()
结果:
p tyle="display: none"Hello/pp style="display: block"Hello Again/p
设置背景图片,以突出透明度的效果
代码如下:
head
titletoggle()/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

来源:http://www.tulaoshi.com/n/20160219/1607359.html

延伸阅读
标签: Web开发
font版本:CSS1/CSS2 兼容性:IE4+ NS4+ 继承性:有 语法: font : font-style || font-variant || font-weight || font-size || line-height || font-family font : caption | icon | menu | message-box | small-caption | status-bar 取值: font-style : CSS1 请参阅 font-style 属性 font-variant : CSS1 请参阅 font-vari...
标签: Web开发
前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表、内部样式表、导入外表样式表和内嵌样式。 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用link标记链接到...
标签: Web开发
color版本:CSS1 兼容性:IE4+ NS4+ 继承性:有 语法: color : color 取值: color : 指定颜色。请参阅 颜色单位 和 附录:颜色表 说明: 检索或设置对象的文本颜色。无默认值。 注意,用颜色名称指定 color 不被一些浏览器接受。但使用 RGB 值指定颜色能被所有里浏览器识别并正确显示。 此属性对于 currentStyle 对象而言是只...
Dust-Me selectors Dust-Me是一个很有用也很好用的Firefox插件,它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。 支持本地和远程样式文件,包括使用link标签、?xml-stylesheet?处理指令、@import语句等方式引入的样式文件;(但是不支持页面中的style块和内联样式)支持IE条件注释中引入的样式文件;可以检查一个页面...
标签: Web开发
继承样式定义方法,这样写的好处可以节省网页的代码容易真正的代码与内容相分离,对seo优化也有很大的帮助,下面我们来看一个简单的实例. style .nav ul li a:hover{ background:url(imgs/hover.gif) left top no-repeat; } .nav ul li{  height:28px;  width:100%; } .nav ul li a{ display:block; height:28px; width:100%; margin...

经验教程

616

收藏

94
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部