這篇文章主要介紹了Css怎么實(shí)現(xiàn)tab選項(xiàng)卡切換，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比延長(zhǎng)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式延長(zhǎng)網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋延長(zhǎng)地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

Css實(shí)現(xiàn)tab選項(xiàng)卡切換的方法：利用target的特性，可以實(shí)現(xiàn)純css的tab效果切換，代碼為【#tab1:target,#tab2:target,#tab3:target{z-index:1;}】。

Css實(shí)現(xiàn)tab選項(xiàng)卡切換的方法：

CSS3偽類target

利用target的特性，可以實(shí)現(xiàn)純css的tab效果切換

示例代碼如下

代碼如下:

.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;
}



tab1
tab2
tab3

tab1