【jQuery/CSS】顯示或隱藏元素
阿新 • • 發佈：2019-02-12
1. CSS分別有display、visibility兩個樣式可以用於隱藏或顯示HTML元素
1) display樣式有多個型別的值可選擇，預設值為inline，隱藏後會釋放元素所佔用的頁面空間（詳見：點選開啟連結）
style="display: none;"
document.getElementById("div1").style.display="none";//隱藏
document.getElementById("div1").style.display="";//顯示2) visibility樣式有多個值可選擇，預設值visible，隱藏後不會釋放元素所佔用的頁面空間（詳見： 點選開啟連結）
style="visibility: none;"
document.getElementById("div1").style.visibility="hidden";//隱藏
document.getElementById("div1").style.visibility="visible";//顯示2. jQuery分別提供了show()、hide()、toggle()方法用於顯示、隱藏和切換。
這個其實就是使用了CSS的display屬性（詳見：點選開啟連結）
隱藏和顯示：
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
在隱藏與顯示之間來回切換：
$("button").click(function(){
$("p").toggle();
});【疑惑】
jQuery貌似沒有對CSS中visibility屬性的實現？待查證確認。
【切換效果人土辦法實現】
主要是之前不知道也沒有來查jQuery的手冊，所以就用CSS去處理這個切換的效果了。
下面是這個比較土的實現，截出來看下：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="No-Cache"> <script type="text/javascript" src="js/jquery-1.9.0.js"></script> <script type="text/javascript"> $(function() { var projectSwitchFlag = false; var originalPicImgSrc = $('#pic').attr('src'); $('#pic').click(function(){ if(projectSwitchFlag == false) { $(".sort").css('visibility', 'hidden'); originalPicImgSrc = $('#pic').attr('src'); $('#pic').attr('src', 'img/f5/project.jpg'); projectSwitchFlag = true; } else { $(".sort").css('visibility', 'visible'); $('#pic').attr('src', originalPicImgSrc); projectSwitchFlag = false; } }); }); </script> </head> <body> <div class="detail"> <div class="sort"> <div class="grid"> <img height="100%" id="sort_grid_pic" alt="" src="img/f5/sort_grid1.jpg" /> </div> <div class="list"> <img height="100%" id="sort_list_pic" alt="" src="img/f5/sort_list2.jpg" /> </div> </div> <div><img width="830px" id="pic" alt="" src="img/f5/content_grid.jpg" /></div> </div> <div class="personal_content"> <img height="100%" width="100%" id="personal_content_pic" alt="" src="img/f5/content_personal.jpg"/> </div> </body> </html>