JS實現點擊按鈕顯示或隱藏DIV內容，這是一種常用的效果，我們先來看看大概效果，如下圖：
JS實現點擊按鈕顯示或隱藏DIV內容一
JS實現點擊按鈕顯示或隱藏DIV內容二
通過上面的2張圖片，大家應該可以看出通過點擊可以把隱藏在DIV里的內容顯示出來，再次點擊又隱藏起來，具體的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>通過JS實現點擊按鈕顯示或隱藏DIV中的內容-Javascript-361模板網</title><style type="text/css">.body { margin: 0 auto;}.box { width: 600px; height: auto; font-size: 14px; background-color: #ccc; display: block; padding: 10px; margin: 0 auto; border-radius: 10px;}.slide { margin: 0 auto; padding: 0; width: 600px;}.btn-slide { background-color: #ccc; width: 80px; height: 30px; line-height: 30px; text-align: center; margin: 0 auto; border-radius: 5px; margin: 10px auto; display: block;}</style><script type="text/javascript">function divShow(){document.getElementById("btnshow").style.display="block";document.getElementById("btnhref").innerHTML ="隱藏";document.getElementById("btnhref").href ="javascript:divhidden()";}function divhidden(){document.getElementById("btnshow").style.display="none";document.getElementById("btnhref").innerHTML ="查看更多";document.getElementById("btnhref").href ="javascript:divShow()";}</script></head><body><div class="box"> <h2>通過JS實現點擊按鈕顯示或隱藏DIV中的內容</h2> <hr /> <p> 歡迎訪問武林網（www.survivalescaperooms.com）網站！ </p> <p> 武林網為您提供DEDECMS、帝國CMS、PHPCMS、DISCUZ、ECSHOP、WORDPRESS等各種內容管理、論壇、商城系統的教程及模板，在這里您一定能找到想要學習的知識！ </p> <div id="btnshow" style="display: none;"> <p> 如有建站、仿站、模板修改、技術咨詢等需求請加 QQ:64882881 詳談！ </p> <p> 我們是一個擁有多年建站經驗的團隊！ </p> </div></div><p class="slide"> <a href="javascript:divShow();" id="btnhref" class="btn-slide">查看更多</a> </p></body></html>查看演示效果
以上就是JS實現點擊按鈕顯示或隱藏DIV內容的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持武林網。新聞熱點
疑難解答
