Jquery-UI是一款流行的前端框架之一,其能夠方便地實現頁面上元素的顯示與隱藏效果。
首先,通過調用hide()函數,實現元素的隱藏效果,代碼如下:
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
上述代碼將在頁面加載完成后先隱藏所有p標簽,當點擊按鈕時,p標簽將再次被隱藏。
如果需要對已隱藏的元素進行顯示,則可以調用show()函數,代碼如下:
$(document).ready(function(){ $("button").click(function(){ $("p").show(); }); });
上述代碼將在頁面加載完成時將所有p標簽顯示出來,當點擊按鈕時,p標簽將再次被顯示隱藏效果。
除了hide()和show()函數,Jquery-UI還提供了toggle()函數,實現元素的切換顯示與隱藏:
$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); });
上述代碼將在頁面加載完成時將所有p標簽顯示出來,當點擊按鈕時,p標簽將切換顯示與隱藏效果。