CSS的顯示和隱藏效果一直是網頁設計中的重點，其中就包括點擊隱藏/顯示div的效果。本文將通過實例來講解如何實現這一效果。
<html><head><style>/*定義兩個class*/
.hidden {
display: none;
}
.show {
display: block;
}
</style></head><body><button onclick="showOrHide()">點擊隱藏/顯示<div id="myDiv">這是一個要隱藏或顯示的div</div></body><script>function showOrHide(){
var myDiv = document.getElementById('myDiv');
if(myDiv.className == 'hidden'){
myDiv.className = 'show';
}else{
myDiv.className = 'hidden';
}
}
</script></html>在這個實例中，我們首先定義了兩個class，其中hidden的display屬性為none，而show的display屬性為block，然后在頁面上增加一個button和一個div標簽，div標簽的id為myDiv。通過onclick事件綁定showOrHide函數，每次點擊按鈕都會執行這個函數。
showOrHide函數中，我們通過getElementById方法獲取myDiv標簽，然后判斷其class屬性是否為hidden。如果是，則將其class屬性修改為show，反之則修改為hidden，從而實現div的隱藏和顯示。在頁面上點擊按鈕可以實現上述效果。
通過這種方式，我們可以輕松實現點擊隱藏/顯示div的效果。另外，也可以使用jQuery等庫來實現更加簡潔、易讀的代碼。
下一篇css點擊頁面有波浪