先來看看效果圖
#CSS3偽類別target##利用target的特性,可以實作純css的tab效果切換
範例程式碼如下
tab1
tab2
tab3
最關鍵的程式碼
#tab1:target,#tab2:target,#tab3:target{ z-index:1; }
先根據target的特性錨連結到對應的p,再根據z-index的屬性,改變p的層級關係,從而實現tab的切換效果!
target相容性最後提一下相容性問題:因為這是CSS3新特性,所以不相容舊版本的瀏覽器,例如IE678。
總結以上就是這篇文章的全部內容,希望能對大家的學習或工作帶來一定的幫助,如果有疑問大家可以留言交流。