使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例)
這是一個(gè)示例:
<html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").toggle(); //toggle()方法進(jìn)行顯示隱藏交互事件,如果顯示的就進(jìn)行隱藏,如果是隱藏的就顯示 }); $(".btn2").toggle(2000,function(){ $(".div2").toggle(); //callback }); }); </script> </head> <body> <p>This is a paragraph.</p> <button class="btn1">Toggle</button> <button class="btn2">Toggle2</button> <div class="div1">http://www.cnblogs.com/sosoft/</div> <div class="div2" style="display:none">柔成</div> </body> </html>
示例中用到的toggle()方法:
toggle() 方法切換元素的可見狀態(tài)。如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
語法$(selector).toggle(speed,callback,switch)
PS:該效果適用于通過 jQuery 隱藏的元素,或在 CSS 中聲明 display:none 的元素(但不適用于 visibility:hidden 的元素)。
以上所述是小編給大家介紹的使用jQuery的toggle()方法對HTML標(biāo)簽進(jìn)行顯示、隱藏的方法(示例),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
基于jquery的大眾點(diǎn)評(píng),分類導(dǎo)航實(shí)現(xiàn)代碼
基于jquery的大眾點(diǎn)評(píng),分類導(dǎo)航實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-08-08jquery1.4后 jqDrag 拖動(dòng) 不可用
jquery 升級(jí)到1.4后 jqDrag 拖動(dòng) 不可用的修改方法2010-02-02使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
jQuery提供的ajax方法能很方便的實(shí)現(xiàn)客戶端與服務(wù)器的異步交互,在asp.net mvc 框架使用jQuery能很方便地異步獲取提交數(shù)據(jù),給用戶提供更好的體驗(yàn)!2010-05-05jQuery實(shí)現(xiàn)的簡單拖拽功能示例【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單拖拽功能,涉及jQuery基于事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)拖拽功能的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08jQuery獲取當(dāng)前點(diǎn)擊的對象元素(實(shí)現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨Query獲取當(dāng)前點(diǎn)擊的對象元素(實(shí)現(xiàn)代碼)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05