CSS在原頁面跳轉是指在同一個頁面中通過點擊不同元素或者按鈕,實現頁面的部分刷新,以達到跳轉到新內容的效果。在這種情況下,常用的方法是通過CSS的偽類選擇器“:target”來實現。
首先,通過HTML的a標簽來實現需要點擊的鏈接,設置href屬性為需要跳轉到的內容對應的ID。例如:
<a href="#section2">點擊跳轉到第二部分</a>
然后,在CSS樣式表中,通過“:target”選擇器來標記跳轉到的內容所對應的元素,例如:
#section2:target { background-color: #F5A9F2; }
其中,ID選擇器“#”加上具體的ID名稱“section2”,就定位到了該元素。而在“:target”選擇器后,我們還可以添加其他的樣式屬性,來實現跳轉后的樣式更改。
需要注意的是,“:target”偽類選擇器只有在錨點鏈接(指鏈接中含有#)被點擊時才會生效。如果直接訪問網頁或者沒有點擊跳轉鏈接,樣式不會被應用,頁面不會被跳轉。
上一篇css圓角多邊形