點擊按鈕實現(xiàn)隱藏顯示切換效果
更新時間:2016年02月03日 09:27:30 作者:一落葉而知秋
這篇文章主要介紹了點擊按鈕實現(xiàn)隱藏顯示切換效果,以一個完整的實例為大家分析了js點擊按鈕實現(xiàn)隱藏顯示切換的功能,感興趣的小伙伴們可以參考一下
本文實例分享了點擊按鈕實現(xiàn)隱藏和顯示的切換代碼,供大家參考,具體內(nèi)容如下
效果圖:
在不少應用中,都有這樣的功能,點擊同一個按鈕可以實現(xiàn)一個元素的顯示和隱藏的切換,下面就通過代碼實例介紹一下如何實現(xiàn)此效果,代碼如下:
隱藏和顯示 <script type="text/javascript"> function Show_Hidden(obj) { if(obj.style.display=="block") { obj.style.display='none'; } else { obj.style.display='block'; } } window.onload=function() { var olink=document.getElementById("link"); var odiv=document.getElementById("thediv"); olink.onclick=function() { Show_Hidden(odiv); return false; } } </script> 顯示\隱藏切換腳本之家歡迎您
以上代碼實現(xiàn)了我們的要求,點擊頂部鏈接可以實現(xiàn)div顯示和隱藏的切換,下面介紹一下它的實現(xiàn)過程。
實現(xiàn)原理:
為鏈接注冊事件處理函數(shù),此處理函數(shù)可以判斷div的style.屬性值,如果為block則將其設置為nonejs隱藏不要的內(nèi)容,也就是將div設置為隱藏狀態(tài),否則設置為block,也就是將div設置為顯示狀態(tài),原理大致如此。需要特別注意的是js隱藏不要的內(nèi)容,在div中,之所以使用style=":block"的目的是讓obj.style.語句能夠獲取屬性值,否則第一次點擊無法將div設置為隱藏,大家可以去掉style=":block"做一下測試, false語句是為了防止鏈接的跳轉(zhuǎn)效果。
關于 false可以參考本文:《學習jQuey中的 false》