快捷導(dǎo)航

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能

更新時(shí)間：2017年10月29日 10:57:43 作者：Double Two

這篇文章主要介紹了jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能,需要的朋友可以參考下

HTML代碼：

<!doctype html>
<html>
<head> 
<meta charset=" utf-8"> 
<title>jq隱藏顯示圖標(biāo)切換</title>
 <!--引入jq文件-->
<script type="text/javascript" scr="./js/jquery.min.js"></script>
</head>
<body>
<!--隱藏／顯示 控制按鈕-->
<div><img id="ctr" scr="./images/01.jpg"></div>
<!--被控制元素-->
<p id="info" style="display:none;">這里是要顯示或隱藏的內(nèi)容</p>
</body>
</html>

　JS代碼:

$(document).ready(function(){
//通過(guò)id="ctr"獲取元素click事件
   $("#ctr").click(function(){
//將顯示和隱藏兩個(gè)狀態(tài)下的顯示圖標(biāo)路徑放入images變量中
    var images=['./images/01.jpg','./images/02.jpg'];
//通過(guò)class的值來(lái)判斷控制顯示的圖標(biāo)樣式
    if($("#ctr").attr("class")=="down"){
    $("#ctr").attr("src",images[0]);
    $("#ctr").removeClass();
    }else{
    $("#ctr").attr("src",images[1]);
    $("#ctr").addClass("down");
    }
//用于控制元素的隱藏或顯示 主要方法toggle(),300是控制元素顯示或隱藏的速度
    $("#info").toggle(300);
  });  
});

以上的就是實(shí)現(xiàn) 隱藏/顯示效果的大概流程，因?yàn)楸救耸切率钟行┎煌昝赖牡胤竭€請(qǐng)多多包涵。如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

jQuery仿寫百度百科的目錄樹(shù)
這篇文章主要介紹了jQuery仿寫百度百科的目錄樹(shù)醫(yī)保詞條樣式，點(diǎn)擊右側(cè)的目錄樹(shù)，左側(cè)跳轉(zhuǎn)到指定的錨點(diǎn)位置，滾動(dòng)鼠標(biāo)，游標(biāo)跟隨一起滾動(dòng)至響應(yīng)鏈接位置，具體實(shí)現(xiàn)思路大家參考下本文
2017-01-01
移動(dòng)節(jié)點(diǎn)的jquery代碼
節(jié)點(diǎn)的移動(dòng)在應(yīng)用中比較常見(jiàn)，如何動(dòng)態(tài)移動(dòng)某一節(jié)點(diǎn)來(lái)實(shí)現(xiàn)某一特殊效果，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助
2014-01-01
使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法
這篇文章主要介紹了使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)紹了省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能,結(jié)合實(shí)例形式分析了jQuery圖像剪切與文件傳輸相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
jQuery插件HighCharts實(shí)現(xiàn)的2D對(duì)數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D對(duì)數(shù)餅圖效果,結(jié)合實(shí)例形式分析了jQuery圖形插件HighCharts繪制2D對(duì)數(shù)餅圖的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
Jquery簡(jiǎn)單分頁(yè)實(shí)現(xiàn)方法
這篇文章主要介紹了Jquery簡(jiǎn)單分頁(yè)實(shí)現(xiàn)方法,實(shí)例分析了jquery分頁(yè)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
jquery mobile動(dòng)態(tài)添加元素之后不能正確渲染解決方法說(shuō)明
本篇文章主要是對(duì)jquery mobile動(dòng)態(tài)添加元素之后不能正確渲染解決方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能,結(jié)合實(shí)例形式分析了jQuery輪播圖相關(guān)的界面布局、3D效果實(shí)現(xiàn)與事件響應(yīng)等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2019-04-04