整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html頁面，顯示的內容太多，會影響用戶體驗，如果有一些，點擊才出現的內容，就可以減少內容的干擾。使用jquery就可以很快的實現。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div隱藏測試</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
<body>
<button id="controller">隱藏或者顯示</button>
<div id="contents" style="display: none;">
<p>div的內容</p>
</div>
<script>
$("#controller").click(function () {
if ($("#contents").is(":hidden")) {
$("#contents").show()
} else {
$("#contents").hide()
}
})
</script>
</body>
</html>
$("#contents").is(":hidden") 可以判斷是否是隱藏
$("#contents").show() 表示display:block,
$("#contents").hide() 表示display:none;
操作元素的屬性
$("#contents").attr("style","display:none;"); //隱藏div
$("#contents").attr("style","display:block;"); //顯示div
也可以操作css屬性
$("#contents").css("display","none"); //隱藏div
$("#contents").css("display","block"); //顯示div
也可以直接使用toggle轉換開關實現
$("#contents").toggle()
CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。
下面就來看看CSS中隱藏元素的方式，以及每種方式的優缺點。
opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。
div {
opacity: 0;
}
div {
filter: opacity(0%);
}
復制代碼在現代瀏覽器中，這兩者之間幾乎沒有實際的區別，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。
注意：opacity 可以設置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發事件。
可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0)，這樣就會使元素完全透明：
div {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
}
復制代碼這三個屬性都是支持設置動畫效果的，需要注意，透明度不能應用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。
Alpha 通道可以設置為：
transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：
div {
transform: scale(0);
}
div {
translate(-9999px, 0px)
}
復制代碼transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隱藏的元素不會觸發任何事件。
clip-path 屬性可以創建一個剪輯區域，用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。
div {
clip-path: circle(0);
}
復制代碼clip-path為添加動畫效果提供了空間，不過它只能在現代瀏覽器中使用。
visibility 屬性可以設置為 visible 或 hidden 來顯示和隱藏元素。
div {
visibility: hidden;
}
復制代碼除非使用collapse值，否則元素使用的空間保持不變。
display 可能是最常用的元素隱藏方法; 。當其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中占據位置，也不會響應綁定的監聽事件。
div {
display: none;
}
復制代碼然而，在大多數情況下，display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流，或者采用contain屬性，否則它的隱藏過程無法設置動畫，并將觸發頁面重新布局。
可以通過將元素的 z-index 屬性設置為負值，以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。
div {
z-index: -1;
}
復制代碼position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：
div {
position: absolute;
left: -999px;
}
復制代碼通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現：
div::after {
position: absolute;
content: '';
top: 0;
bottom: 100%;
left: 0;
right: 0;
background-color: #fff;
}
復制代碼雖然這從技術上講是可以實現的，但是這樣做需要更多的代碼。
可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。
div {
height: 0;
padding: 0;
overflow: hidden;
}
復制代碼使用這種形式我們可以在隱藏過程中使用動畫效果，并且他的性能會比 transform 好很多。
分類：
一說起隱藏HTML頁面上的元素，很多人第一反應就是設置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區別。
本篇文章中的例子直接放到github地址中，感興趣的同學可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html
CSS
正如上文說的一樣，最簡單也最粗暴的方法就是設置元素的display屬性為none;
display:none;
設置為display:none;的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。
另外一種方法是設置元素的visibility屬性為hidden。
visibility: hidden
這種做法雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導致瀏覽器的重匯而不會引起重排。
如果希望元素隱藏后不會引起頁面布局的變化，則推薦使用visibility:hidden;方式。
設置元素透明度opacity屬性為0，也可以隱藏頁面元素。
opacity:0
在呈現上與visibility:hidden;方式一樣，同樣會占據頁面空間。
對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應的差異如下圖所示。
頁面布局差異
display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發綁定的事件。
opacity:0; 的元素會觸發綁定的事件，例如點擊會觸發click函數。
我們可以通過以下的例子來看看。
首先我們定義兩個div，分別設置為visibility: hidden;和opacity:0，在兩個div上分別綁定一個click事件。
定義div元素
綁定的事件
當我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結果。
結果
從上述結果可以看出和上述結論一致。
display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設置的時間內消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。
同樣我們可以通過以下這個例子來看看。
首先，我們定義兩個div，并設置其transition屬性。
div元素
定義transition效果
我們通過將鼠標移至元素上，可以看到兩者的差異，從而驗證了上述結論的正確性。
本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區別，以便大家在特定的場景中進行選擇。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
