jQuery toggle()設(shè)置CSS樣式
更新時間：2009年11月05日 00:03:32 作者：
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
toggle()
切換元素的可見狀態(tài)。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切換所有段落的可見狀態(tài)。
HTML 代碼:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代碼:
$("p").toggle()
結(jié)果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
設(shè)置背景圖片，以突出透明度的效果
<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>
切換元素的可見狀態(tài)。
如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
示例
切換所有段落的可見狀態(tài)。
HTML 代碼:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代碼:
$("p").toggle()
結(jié)果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
設(shè)置背景圖片，以突出透明度的效果
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
在jquery中，jquery動畫事件和動畫函數(shù)經(jīng)常用的到，今天小編抽時間給大家整理了些關(guān)于常用的jquery動畫事件和動畫函數(shù)，對jquery動畫函數(shù)和動畫事件相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這個插件的上篇訪問量很不好，幾乎是我寫的文章里最少的點擊量的了，不知道是不是因為大家對我說的這個插件不感興趣還是說我寫的東西技術(shù)含量太差了，呵，那我只能孤芳自賞了2011-10-10
jQuery ul標(biāo)簽下拉菜單演示代碼，需要使用基于jquery的下拉菜單效果的朋友可以參考下。2010-12-12
本篇文章分享了基于jQuery實現(xiàn)背景滑動菜單的實例代碼。感興趣的朋友可以下載實例運行，下面就跟小編一起來看看吧2016-12-12![基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]](http://img.jbzj.com/images/xgimg/bcimg4.png)
基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話，如果一次把所有的圖片都加載出來的話，這勢必會影響網(wǎng)站的加載速度，給用戶帶來比較差的體驗。2011-05-05
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
jQuery實現(xiàn)通過方向鍵控制div塊上下左右移動的方法【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)通過方向鍵控制div塊上下左右移動的方法,涉及jQuery結(jié)合鍵盤事件響應(yīng)動態(tài)修改頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
prop() 方法應(yīng)該用于檢索屬性值，例如 DOM 屬性，如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected，這里腳本之家小編就為大家介紹一下啊2020-01-01
這篇文章主要介紹了jquery實現(xiàn)從數(shù)組移除指定的值,涉及jQuery中g(shù)rep()方法對數(shù)組元素進行過濾篩選的技巧,需要的朋友可以參考下2015-06-06
jQuery.ajax實現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開發(fā)項目，使用ajax進行前后端的通訊。有一個場景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型，前端進行不同的響應(yīng)，這里記錄下如何使用$.ajax實現(xiàn)該需求,需要的朋友可以參考下2016-11-11