在web開發(fā)過程中,經(jīng)常需要隱藏或顯示頁面中的某個(gè)div層,這種情況可以通過jquery來實(shí)現(xiàn)。
$("#myDiv").hide();//隱藏id為myDiv的div層 $("#myDiv").show();//顯示id為myDiv的div層 $("#myDiv").toggle();//切換id為myDiv的div層的顯示狀態(tài),如果原來是顯示狀態(tài),則隱藏;如果原來是隱藏狀態(tài),則顯示。
除了直接使用hide、show、toggle三個(gè)方法外,jquery還提供了一些更靈活的方法,可以根據(jù)不同的需求進(jìn)行選擇。
$("#myDiv").fadeIn();//淡入顯示id為myDiv的div層 $("#myDiv").fadeOut();//淡出隱藏id為myDiv的div層 $("#myDiv").fadeToggle();//切換id為myDiv的div層的淡入淡出狀態(tài) $("#myDiv").slideUp();//向上滑動(dòng)隱藏id為myDiv的div層 $("#myDiv").slideDown();//向下滑動(dòng)顯示id為myDiv的div層 $("#myDiv").slideToggle();//切換id為myDiv的div層的滑動(dòng)顯示狀態(tài)
需要注意的是,這些方法都是基于jquery的動(dòng)畫效果來實(shí)現(xiàn)的,因此需要在頁面中引入jquery的動(dòng)畫庫。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
通過上面的方法,就可以很方便地實(shí)現(xiàn)div層的隱藏和顯示了。