您好,登錄后才能下訂單哦!
本篇內容介紹了“jquery如何讓div不占位隱藏”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
jquery讓div不占位隱藏的方法:1、使用“$("div").css('display','none');”語句;2、使用“$("div").hide();”語句;3、使用“$("div").toggle();”語句。
本教程操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。
jquery讓div不占位隱藏
要讓div不占位隱藏,就會想到給div設置display:none
樣式。
display:none
可以不占據空間,把元素隱藏起來,所以動態改變此屬性時會引起重排(改變頁面布局),可以理解成在頁面中把該元素刪除掉一樣;不會被子孫繼承,但是其子孫是不會顯示的,畢竟都一起被隱藏了。
那么如何使用jquery給div設置display:none
樣式?下面給大家介紹一下:
方法一:使用css()添加display:none樣式
$("div").css('display','none');
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"> </script> <script> $(document).ready(function() { $("button").click(function() { $("div").css('display', 'none'); }); }); </script> </head> <body> <div style="border: 1px solid red;">hello</div> <br> <button>點擊按鈕,讓div不占位隱藏</button> </body> </html>
方法二:使用hide() 方法
$("div").hide();
hide()方法可以隱藏元素,原理就是給元素添加display:none樣式
方法三:使用toggle()方法
$("div").toggle();
toggle(方法檢查被選元素的可見狀態。如果一個元素是隱藏的,則運行 show()隱藏元素,如果一個元素是可見的,則運行 hide()顯示元素 - 這會造成一種切換的效果。
“jquery如何讓div不占位隱藏”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。