jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
更新時(shí)間：2015年12月11日 09:07:46 作者：cag2050
這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下
我滴古老風(fēng)格，廢話不多說，貼代碼了。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
.bg1 {
background-image:url(images/21.jpg);
background-repeat:no-repeat;
color:#0CF;
}
.bg2 {
background-image:url(images/22.jpg);
background-repeat:no-repeat;
color:#F00;
}
</style>
<script type="text/javascript">
//參數(shù)para1：希望隱藏元素的id值
function toggle1(para1){
if ($("#p2").attr("class")=="bg1")
{
$("#p2").attr("class","bg2");
}
else
{
$("#p2").attr("class","bg1");
}
$("#"+para1).toggle();
}
</script>
</head>
<body>
<p id="p1">此處將顯示或隱藏</p>
<p id="p2" class="bg1" onClick="toggle1('p1')" style="height:31px">點(diǎn)擊此處顯示或隱藏上面部分并更換自己的樣式(包括背景圖、字體等）</p>
</body>
</html>
jQuery toggleClass() 方法
實(shí)例
對(duì)添加和移除所有 <p> 元素的 "main" 類進(jìn)行切換：
$("button").click(function(){
$("p").toggleClass("main");
});
定義和用法
toggleClass() 方法對(duì)添加和移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。
該方法檢查每個(gè)元素中指定的類。如果不存在則添加類，如果已設(shè)置則刪除之。這就是所謂的切換效果。
然而，通過使用 "switch" 參數(shù)，您能夠規(guī)定只刪除或只添加類。
語法
$(selector).toggleClass(classname,function(index,currentclass),switch)
您可能感興趣的文章:
相關(guān)文章
jquery為我們提供了操作數(shù)組和對(duì)象的工具函數(shù)，方便和簡(jiǎn)化了我們對(duì)它們的操作。今天我們就進(jìn)入jQuery的工具函數(shù)的復(fù)習(xí)。2015-06-06
jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的輪換出現(xiàn)效果,涉及jquery針對(duì)圖片樣式切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。2010-05-05
jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個(gè)參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03
jQuery中animate動(dòng)畫第二次點(diǎn)擊事件沒反應(yīng)
這篇文章主要介紹了jQuery中animate動(dòng)畫第二次點(diǎn)擊事件沒反應(yīng)的解決方法，非常的實(shí)用，有需要的小伙伴可以參考下2015-05-05
這篇文章主要介紹了json格式的javascript對(duì)象用法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)json格式數(shù)據(jù)操作的常見技巧,需要的朋友可以參考下2016-07-07
jquery實(shí)現(xiàn)背景跟隨鼠標(biāo)滑動(dòng)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了jquery背景跟隨鼠標(biāo)滑動(dòng)導(dǎo)航，特別美觀，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
基于jquery完美拖拽，可返回拖動(dòng)軌跡 用JQ實(shí)現(xiàn)，話不多說，直接上碼2012-03-03
jquery中cookie用法實(shí)例詳解(獲取,存儲(chǔ),刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實(shí)例詳細(xì)分析了jQuery操作cookie的獲取,存儲(chǔ),刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01
jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動(dòng)追逐效果附源碼下載
這篇文章主要介紹了jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動(dòng)追逐效果的相關(guān)資料,需要的朋友可以參考下2016-04-04