點選按鈕顯示或者隱藏元素例項程式碼
分享一段程式碼例項,它實現了點選按鈕元素隱藏和顯示效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>元素的顯示和隱藏-螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("div").hide(1000); $("#show").click(function(){ $("div").show(1000); }) }) }) </script> </head> <body> <div>螞蟻部落歡迎您</div> <button id="show">顯示</button> <button id="hide">隱藏</button> </body> </html>
以上程式碼實現了我們的要求,可以點選按鈕的時候實現div的隱藏和顯示。
然後實際應用中都是點選同一個按鈕來實現元素的顯示和隱藏效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #hidden_enent{ width:200px; height:150px; background:#ccc; text-align:center; line-height:150px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $('#click_event').click(function(){ if($('#hidden_enent').is(':hidden')){ $('#hidden_enent').show(); $('#click_event').val('點選隱藏'); } else{ $('#hidden_enent').hide(); $('#click_event').val('點選顯示'); } }) }) </script> </head> <body> <input type="button" id="click_event" value="點選隱藏"/> <div id="hidden_enent">螞蟻部落歡迎您</div> </body> </html>
相關閱讀:
(1).click事件可以參閱jQuery click事件一章節。
(2).hide()函式可以參閱jQuery hide()一章節。
(3).show()函式可以參閱jQuery show()一章節。
相關文章
- 點選按鈕實現隱藏一個元素程式碼例項
- jquery點選按鈕顯示和隱藏DIvjQuery
- 點選按鈕實現隱藏和顯示的切換程式碼
- 點選按鈕動畫方式隱藏和顯示div動畫
- 點選同一按鈕顯示隱藏切換
- 點選按鈕實現div的顯示和隱藏
- JavaScript點選一個按鈕隱藏和顯示divJavaScript
- 點選實現隱藏元素本身程式碼例項
- 點選空白出隱藏鍵盤,或者點選按鈕隱藏軟鍵盤
- JavaScript 點選一個按鈕 div的隱藏和顯示JavaScript
- 點選實現元素的漸隱或者漸現程式碼例項
- 點選按鈕拷貝複製元素內文字程式碼例項
- js設定元素控制元件顯示和隱藏程式碼例項JS控制元件
- 點選開關顯示或者隱藏input文字框
- jQuery控制div顯示和隱藏程式碼例項jQuery
- jQuery點選按鈕實現div的隱藏和顯示切換效果jQuery
- 微信隱藏網頁右上角按鈕js程式碼例項網頁JS
- 點選按鈕實現文字框數字增加或者減少程式碼例項
- 點選按鈕複製連結程式碼例項
- JS實現點選引數皮膚按鈕顯示或隱藏資料JS
- 點選同一按鈕實現div的隱藏與顯示切換
- jQuery實現的點選元素隱藏和顯示jQuery
- div的顯示和隱藏切換程式碼例項
- jquery使用一個按鈕實現控制元素的顯示與隱藏jQuery
- 點選按鈕複製文字框文字程式碼例項
- javascript 點選回車相當於點選按鈕程式碼例項JavaScript
- login介面 checkbox選擇顯示或者隱藏密碼密碼
- js實現的點選顯示或者隱藏相關內容JS
- 點選按鈕設定其背景顏色程式碼例項
- js點選按鈕數字加1效果程式碼例項JS
- jQuery點選頁面其他地方隱藏顯示的元素jQuery
- 直播網站原始碼,EasyUI按鈕控制標籤顯示與隱藏網站原始碼UI
- VB原始碼推薦: 動態的顯示/隱藏start按鈕 (轉)原始碼
- 點選實現顯示密碼效果程式碼例項密碼
- jQuery點選顯示彈出層例項程式碼jQuery
- js表單提交後提交按鈕不可點選程式碼例項JS
- 點選刪除按鈕刪除當前行程式碼例項行程
- 回到頂部和回到頂部按鈕的顯示隱藏