jQuery中toggleClass()方法用法實例
更新時間：2015年01月05日 11:54:04 投稿：shichen2014
這篇文章主要介紹了jQuery中toggleClass()方法用法,實例分析了toggleClass()方法的功能、定義及對添加或移除匹配元素的一個或多個類進行切換的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中toggleClass()方法用法。分享給大家供大家參考。具體分析如下：
此方法對添加或移除匹配元素的一個或多個類進行切換。
toggleClass()方法檢查匹配元素中指定的類。如果不存在則添加類，如果已設(shè)置則刪除之。這就是所謂的切換效果。
語法結(jié)構(gòu)一:
復制代碼 代碼如下:
$(selector).toggleClass(class,switch)
如果存在（不存在）就刪除（添加）一個類。
參數(shù)列表:
實例代碼:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
.content{display:none;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").toggleClass("content");
})
})
</script>
</head>
<body>
<button>添加更多內(nèi)容</button>
<div class="content"><textarea cols="40" rows="5" name="textarea"></textarea></div>
</body>
</html>
語法結(jié)構(gòu)二:
復制代碼 代碼如下:
$(selector).toggleClass(function(index,class),switch)
把函數(shù)的返回值作為切換的類。
參數(shù)列表:
實例代碼:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.fzitv.net/" />
<title>腳本之家</title>
<style type="text/css">
.content{display:none;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").toggleClass(function(){
return "content"
});
})
})
</script>
</head>
<body>
<button>添加更多內(nèi)容</button>
<div class="content"><textarea cols="40" rows="5" name="textarea"></textarea></div>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- 使用JS實現(xiàn)jQuery的addClass, removeClass, hasClass函數(shù)功能
- jQuery使用addClass()方法給元素添加多個class樣式
- jQuery中addClass()方法用法實例
- Jquery.addClass始終無效原因分析
- jQuery源碼解讀之a(chǎn)ddClass()方法分析
- jQuery中removeClass()方法用法實例
- jQuery使用removeClass方法刪除元素指定Class的方法
- jQuery源碼解讀之removeClass()方法分析
- jQuery使用toggleClass方法動態(tài)添加刪除Class樣式的方法
- 用jQuery toggleClass 實現(xiàn)鼠標移上變色
- JQuery使用屬性addClass、removeClass和toggleClass實現(xiàn)增加和刪除類操作示例
相關(guān)文章
Jquery 插件學習實例1 插件制作說明與tableUI優(yōu)化
Jquery 插件學習實例1 插件制作說明與tableUI優(yōu)化，需要的朋友可以參考下。2010-04-04
Jquery遍歷select option和添加移除option的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫query遍歷select option和添加移除option的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了Jquery ajax基礎(chǔ)教程的相關(guān)資料,需要的朋友可以參考下2015-11-11
jQuery判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部的實現(xiàn)方法
最近做項目遇到這樣的需求，要求基于jq判斷網(wǎng)頁是否已經(jīng)滾動到瀏覽器底部了，下面小編給大家分享實例代碼，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了jquery獲取html元素的絕對位置和相對位置的方法,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片上傳前本地預覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
存儲的是被拖動的圖片的初始坐標，為兩個變量設(shè)置被拖動圖片的初始坐標，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
空閑時候?qū)懙囊恍﹋query小代碼，雖然就幾分鐘完成的小代碼，但每天保持練習，不至于頭腦會生銹；2009-08-08
jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果(附源碼)
這篇文章主要介紹了jQuery+jsp實現(xiàn)省市縣三級聯(lián)動效果,以完整實例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫操作實現(xiàn)省市縣三級聯(lián)動效果的相關(guān)技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jquery實現(xiàn)個人中心導航菜單效果和美觀都非常不錯
這是一款由jquery開發(fā)的導航菜單。適合放在門戶網(wǎng)站的個人用戶中心后臺。效果和美觀都非常不錯2014-09-09