CSS實現(xiàn)點擊后顯示內(nèi)容的效果，通常需要使用JavaScript來輔助完成，以下是一個簡單的示例，展示如何使用CSS和JavaScript來實現(xiàn)點擊下方按鈕后顯示內(nèi)容的效果。
HTML結(jié)構(gòu)
<div class="container">
<button id="myButton">點擊我</button>
<div id="myContent" class="hidden">
<p>這里是點擊按鈕后顯示的內(nèi)容。</p>
</div>
</div>CSS樣式
.container {
position: relative;
}
#myContent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
display: none;
}JavaScript代碼
document.getElementById('myButton').addEventListener('click', function() {
var content = document.getElementById('myContent');
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});完整示例
<!DOCTYPE html>
<html>
<head>
<style>
.container { position: relative; }
#myContent { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: none; }
</style>
<script>
document.getElementById('myButton').addEventListener('click', function() {
var content = document.getElementById('myContent');
if (content.style.display === 'none') { content.style.display = 'block'; } else { content.style.display = 'none'; } }); </script> </head> <body> <div class="container"> <button id="myButton">點擊我</button> <div id="myContent" class="hidden"> <p>這里是點擊按鈕后顯示的內(nèi)容。</p> </div> </div> </body> </html> ``` 你可以將上述代碼復(fù)制到HTML文件中，運行后將會看到點擊按鈕后內(nèi)容顯示的效果，希望這個示例對你有幫助！
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時請以鏈接形式注明文章出處。
