在網(wǎng)頁開發(fā)過程中,我們經(jīng)常會需要使用超鏈接進行跳轉(zhuǎn)。
但是,在有些情況下,我們需要在當(dāng)前頁面中展示另外一個頁面的內(nèi)容,這時候就需要用到CSS模擬跳轉(zhuǎn)。
具體操作如下:
/* 設(shè)置偽類,當(dāng)點擊目標(biāo)元素時,展示隱藏元素 */ .target:active + .hidden { display: block; } /* 設(shè)置需要隱藏的元素 */ .hidden { display: none; }
在HTML代碼中,只需要設(shè)置一個目標(biāo)元素和一個需要隱藏的元素,并且給目標(biāo)元素添加target類名即可:
<div class="target">點擊我可以展示隱藏元素</div>
<div class="hidden">我是隱藏的元素內(nèi)容</div>
使用CSS模擬跳轉(zhuǎn)的好處是可以避免頁面刷新的情況下展示新內(nèi)容,達到更加流暢的用戶體驗效果。
上一篇css模擬rem