CSS是一種網頁設計語言,常用于網頁的樣式布局。其中一個常見的需求是在點擊某個元素時隱藏另一個元素。使用CSS可以輕松實現這一功能。
<div class="container"> <div class="hide-me"></div> <button onclick="toggle()">點擊隱藏</button> </div> <style> .container { position: relative; } .hide-me { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: #ccc; display: none; } .hide { display: none; } .show { display: block; } </style> <script> function toggle() { var hideMe = document.querySelector('.hide-me'); hideMe.classList.toggle('hide'); hideMe.classList.toggle('show'); } </script>
首先在HTML中添加一個容器,包括需要隱藏的元素和一個按鈕。在CSS中,我們使隱藏的元素絕對定位并覆蓋整個容器。然后,通過添加類來設置元素的顯示/隱藏狀態。最后,在JavaScript中,我們創建一個函數,以通過切換類來切換元素的可見性。
現在,當用戶點擊“點擊隱藏”按鈕時,將切換隱藏元素的可見性。