點選按鈕實現div的顯示和隱藏
本章節分享一段極為簡單的程式碼例項,實現了點選按鈕控制div的顯示和隱藏。
比較適合初學者參考,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { margin: 50px 300px; padding: 0px; width: 100%; height: 100%; } #antzone { width: 200px; height: 300px; background:#ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function () { $(".drop-down input").click(function () { var div = $('#antzone'); if (div.is(':hidden')) { div.show(); } else { div.hide(); } }); }) </script> </head> <body> <div class="drop-down"> <input type="button" value="點選" /> <div style="display:none" id="antzone"></div> </div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function () {}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$(".drop-down input").click(function () {}),為class屬性值為drop-down的元素下面的input元素註冊click事件處理函式。
(3).var div = $('#antzone'),獲取id屬性值為antzone的元素物件。
(4).if (div.is(':hidden')) { div.show();
}
else {
div.hide();
},判斷div元素是否處於隱藏狀態,如果隱藏則顯示,否則隱藏。
二.相關閱讀:
(1).is()可以參閱jQuery is()一章節。
(2).show()可以參閱jQuery show()一章節。
(3).hide()可以參閱jQuery hide()一章節。
(4).:hidden可以參閱jQuery :hidden一章節。
相關文章
- jquery點選按鈕顯示和隱藏DIvjQuery
- 點選按鈕動畫方式隱藏和顯示div動畫
- jQuery點選按鈕實現div的隱藏和顯示切換效果jQuery
- JavaScript點選一個按鈕隱藏和顯示divJavaScript
- JavaScript 點選一個按鈕 div的隱藏和顯示JavaScript
- 點選同一按鈕實現div的隱藏與顯示切換
- 點選按鈕實現隱藏和顯示的切換程式碼
- CSS點選隱藏和顯示div效果CSS
- 點選同一按鈕顯示隱藏切換
- js實現的點選一個div顯示,其他div隱藏效果JS
- JavaScript點選切換div的顯示和隱藏JavaScript
- JS實現點選引數皮膚按鈕顯示或隱藏資料JS
- 點選按鈕顯示或者隱藏元素例項程式碼
- jQuery實現的點選元素隱藏和顯示jQuery
- jQuery實現簡單點選隱藏和點選顯示列表的功能jQuery
- js下拉框實現div顯示和隱藏JS
- jquery使用一個按鈕實現控制元素的顯示與隱藏jQuery
- 回到頂部和回到頂部按鈕的顯示隱藏
- javascript隱藏和顯示div的方法JavaScript
- 點選按鈕實現隱藏一個元素程式碼例項
- 點選空白出隱藏鍵盤,或者點選按鈕隱藏軟鍵盤
- CSS 實現 : 滑鼠移動上去顯示 div,移開隱藏 divCSS
- js實現的點選顯示或者隱藏相關內容JS
- jquery實現的點選按鈕改變可用狀態和顯示文字程式碼jQuery
- JavaScript動畫方式控制div元素的隱藏和顯示JavaScript動畫
- javascript動態設定div的顯示和隱藏JavaScript
- 用js控制div的顯示與隱藏JS
- div的顯示和隱藏切換程式碼例項
- VB原始碼推薦: 動態的顯示/隱藏start按鈕 (轉)原始碼
- JavaScript 設定div顯示與隱藏JavaScript
- jQuery控制div顯示和隱藏程式碼例項jQuery
- jQuery 點選按鈕改變可用狀態和顯示文字jQuery
- view的隱藏和顯示View
- jQuery 實現顯示與隱藏效果jQuery
- 直播網站原始碼,EasyUI按鈕控制標籤顯示與隱藏網站原始碼UI
- vue中點選空白處隱藏div的實現(用指令優雅的實現)Vue
- JavaScript點選按鈕刪除div元素JavaScript
- jQuery點選按鈕刪除div元素jQuery