用CSS3偽類(lèi)target如何制作tab選項(xiàng)卡效果

2020-03-22 19:22:46

字體：大中小

供稿：網(wǎng)友

我們都知道當(dāng)我們點(diǎn)擊#id的連接后，如果網(wǎng)頁(yè)中有這個(gè)id的，網(wǎng)頁(yè)會(huì)自動(dòng)跳動(dòng)到其所在位置，如果網(wǎng)頁(yè)中沒(méi)有這個(gè)id，它就沒(méi)有任何顯示。css3中添加了偽類(lèi):target，使用:target偽類(lèi)可以讓點(diǎn)擊后的id有新的效果，比如改變顏色、位置等等。所以我們可以用它做很多效果，比如tab標(biāo)簽等等。偽類(lèi):target的使用方法和:link、:hover一樣：
?
selector:target{
color:#;
/*other styles*/
}
利用target制作tab標(biāo)簽切換的原理是利用點(diǎn)擊后改變?nèi)萜鞯腨軸屬性z-index的值。Html代碼： div
ul
li a href="#tab1" 標(biāo)簽一 /a /li
li a href="#tab2" 標(biāo)簽二 /a /li
li a href="#tab3" 標(biāo)簽三 /a /li
/ul
div id="tab1"
第一層內(nèi)容 /div
div id="tab2"
第二層內(nèi)容 http://www.jzxue.com /div
div id="tab3"
第三層內(nèi)容 http://www.jzxue.com /div
/div
Html代碼部分不要忘記將鏈接的標(biāo)簽寫(xiě)成#tab1、#tab2和#tab3，否則不能實(shí)現(xiàn)效果。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部分有一些內(nèi)容是比較重要的，首先tab_content里面要使用定位屬性position:absolute，讓三個(gè)tab標(biāo)簽內(nèi)容重疊起來(lái)，然后利用z-index:-1讓他們處于Z軸的靠下層，另外，如果不定義背景為白色，三個(gè)層的內(nèi)容會(huì)重疊起來(lái)，顯得十分混亂。最后一部分CSS就是利用target偽類(lèi)改變其z軸層次的，他們是成功實(shí)現(xiàn)效果的關(guān)鍵。將這些代碼拷貝到網(wǎng)頁(yè)中，然后預(yù)覽。這里要注意一點(diǎn)，只有支持CSS3的瀏覽器才可以看到效果，比如Firefox、google Chrome、Opera，IE系列除了IE9以外，IE6、7、8是看不到效果的html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

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

下一篇：用css網(wǎng)站布局之十步實(shí)錄?。ㄊ?/a>