先來看看效果圖
#CSS3偽類別target##利用target的特性,可以實作純css的tab效果切換
範例程式碼如下
<style type="text/css"> .tabmenu{ position:absolute; top:-28px; left:144px; margin:0px; } .tabmenu li{ display:inline-block; } .tabmenu li a{ display:block; padding:5px 10px; margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:5px 5px 0 0; background-color:#e3f1f8; color:#333; text-decoration: none; font-size:16px; } .tablist{ position:relative; top:200px; margin:0 auto; width:600px; min-height:200px; } .tab_content{ position:absolute; width:600px; height:170px; padding:15px; border:1px solid #91a7b4; border-radius:10px; box-shadow:0 2px 3px rgba(0,0,0,0,1); font-size:16px; line-height:16px; color:#666; background-color:#fff; } #tab1:target,#tab2:target,#tab3:target{ z-index:1; } </style> <p class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <p id="tab1" class="tab_content">tab1</p> <p id="tab2" class="tab_content">tab2</p> <p id="tab3" class="tab_content">tab3</p> </p>
最關鍵的程式碼
#tab1:target,#tab2:target,#tab3:target{ z-index:1; }
先根據target的特性錨連結到對應的p,再根據z-index的屬性,改變p的層級關係,從而實現tab的切換效果!
target相容性最後提一下相容性問題:因為這是CSS3新特性,所以不相容舊版本的瀏覽器,例如IE678。
總結以上就是這篇文章的全部內容,希望能對大家的學習或工作帶來一定的幫助,如果有疑問大家可以留言交流。