今天我們來講一下如何使用CSS來控制網頁中的顯示和隱藏。我們可以使用div標簽來包裹需要控制的內容,然后使用CSS來控制其顯示和隱藏。
首先,我們創建一個包含兩個div的HTML代碼,一個div是用來顯示內容的,一個div是用來控制顯示和隱藏的。使用pre標簽來展示代碼:
<div class="content"> <p>這是需要顯示的內容。</p> </div> <div class="toggle"> <p>點擊這里來顯示或隱藏內容</p> </div>接下來,我們使用CSS來控制顯示和隱藏。我們為toggle類添加click事件,當點擊時,我們將content類的display屬性設置為none,這樣就可以隱藏內容。如果再次點擊toggle類,我們將content類的display屬性設置為block,這樣就可以再次顯示內容。
.content { display: block; } .toggle { cursor: pointer; } .toggle p { color: blue; text-decoration: underline; } .content.hide { display: none; } .toggle.clicked + .content { display: none; }最后,我們將JS代碼添加到HTML文件中,以便為toggle類添加click事件,并處理顯示和隱藏。
const toggle = document.querySelector('.toggle'); const content = document.querySelector('.content'); toggle.addEventListener('click', () =>{ toggle.classList.toggle('clicked'); content.classList.toggle('hide'); });現在,我們就可以在網頁上輕松實現顯示和隱藏div內容的功能了!
上一篇html5京東拍賣的代碼
下一篇html5交互界面代碼