HTML中的隱藏顯示技術(shù)是一種非常實用的技術(shù),它可以讓網(wǎng)頁的內(nèi)容更加豐富,也可以增加用戶的交互性。但是有時候我們需要設置一些信息不顯示出來,例如一些代碼或者機密信息,這時候我們就需要使用HTML的隱藏顯示技術(shù)了。
<div style="display:none;"> 這里是需要隱藏的內(nèi)容 </div>
上面的代碼中,我們使用了div標簽來包裹需要隱藏的內(nèi)容,并設置了display屬性為none,這樣就能實現(xiàn)內(nèi)容隱藏的效果。但是這個時候頁面上是沒有任何內(nèi)容顯示出來的,我們需要通過一些操作來讓隱藏的內(nèi)容顯示出來。
<button onclick="getElementById('hidden-info').style.display='block'">顯示隱藏內(nèi)容</button> <div id="hidden-info" style="display:none;"> 這里是需要隱藏的內(nèi)容 </div>
上面的代碼中,我們使用了button按鈕,并通過JavaScript的getElementById方法來實現(xiàn)點擊按鈕顯示內(nèi)容的效果。
除了使用JavaScript來實現(xiàn)顯示隱藏內(nèi)容的效果外,還可以使用CSS樣式來實現(xiàn),下面是一個基于CSS的實現(xiàn)示例。
<style> .hidden-info { display: none; } .show-info:hover .hidden-info { display: block; } </style> <div class="show-info"> 顯示隱藏內(nèi)容 <div class="hidden-info">這里是需要隱藏的內(nèi)容</div> </div>
上面的代碼中,我們通過CSS的display屬性來實現(xiàn)內(nèi)容的隱藏,然后通過:hover偽類選擇器來實現(xiàn)在鼠標懸停時顯示內(nèi)容的效果。
上一篇css為什么不換行符