用CSS3偽類target如何制作tab選項卡效果

2020-03-22 19:22:46

字體：大中小

來源：轉載

供稿：網友

我們都知道當我們點擊#id的連接后，如果網頁中有這個id的，網頁會自動跳動到其所在位置，如果網頁中沒有這個id，它就沒有任何顯示。css3中添加了偽類:target，使用:target偽類可以讓點擊后的id有新的效果，比如改變顏色、位置等等。所以我們可以用它做很多效果，比如tab標簽等等。偽類:target的使用方法和:link、:hover一樣：
?
selector:target{
color:#;
/*other styles*/
}
利用target制作tab標簽切換的原理是利用點擊后改變容器的Y軸屬性z-index的值。Html代碼： div
ul
li a href="#tab1" 標簽一 /a /li
li a href="#tab2" 標簽二 /a /li
li a href="#tab3" 標簽三 /a /li
/ul
div id="tab1"
第一層內容 /div
div id="tab2"
第二層內容 http://www.jzxue.com /div
div id="tab3"
第三層內容 http://www.jzxue.com /div
/div
Html代碼部分不要忘記將鏈接的標簽寫成#tab1、#tab2和#tab3，否則不能實現效果。CSS代碼： style type="text/css"
!--
.tab_box {
clear:both;
height:40px;
}
.tab_box li {
float:left;
border:1px solid #CCC;
margin:0 5px 0 0;
list-style:none;
padding:5px;
}
.tab_content {
clear:both;
border:1px solid #CCC;
padding:20px;
margin:40px;
position: absolute;
z-index:-1;
background:#FFF;
width:300px;
height:200px;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
--
/style CSS部分有一些內容是比較重要的，首先tab_content里面要使用定位屬性position:absolute，讓三個tab標簽內容重疊起來，然后利用z-index:-1讓他們處于Z軸的靠下層，另外，如果不定義背景為白色，三個層的內容會重疊起來，顯得十分混亂。最后一部分CSS就是利用target偽類改變其z軸層次的，他們是成功實現效果的關鍵。將這些代碼拷貝到網頁中，然后預覽。這里要注意一點，只有支持CSS3的瀏覽器才可以看到效果，比如Firefox、google Chrome、Opera，IE系列除了IE9以外，IE6、7、8是看不到效果的html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：yii2 頁面底部加載css和js的技巧

下一篇：用css網站布局之十步實錄！（十）