IT工程師數位筆記本

實現原理利用:target,把a標簽自身的href以及id設置成一樣的。

案例1:實現元素的切換

HTML:

<div id="box">
<a href="#a" id="a">
<p>我是P1的內容</p>
</a>
<a href="#b" id="b">
<p>我是P2的內容</p>
</a>
</div>

CSS:

body,div{
margin:0;
padding:0;
}
#box>a{
display:none;
}
#box>a:first-of-type{
display:block;
}
#box>a:target{
display:none;
}
#box>a:target + a{
display:block;
}

效果

點擊后成這樣。

再次點擊

實現的原理就是先讓所有的a標簽隱藏,讓第一個顯示,當點擊的時候讓自己隱藏讓它的下一個兄弟元素顯示,其實這里有個坑,一開始實現這個效果的時候我以為會出問題,其實光這句話是不夠的,剛剛碰巧我使用了

#box>a:first-of-type{
display:block;
}

其實很關鍵,因為+號是匹配不了它的上一個兄弟元素的,不太好解釋,自己去想吧。

案例2:通過點擊事件結合模擬父元素選擇器使用可以看這篇文章:CSS中模擬父元素選擇器

案例3:利用target制作的tab切換可以看這篇文章:CSS3選擇器的研究,案例 ctrl+f 搜索target

另外一種tab的實現,通過結合z-index

HTML:

<ul class="tabs">
<li><a href="#tab1">標簽一</a></li>
<li><a href="#tab2">標簽二</a></li>
<li><a href="#tab3">標簽三</a></li>
</ul>
<div id="tab1" class="tab_content">
tab1
</div>
<div id="tab2" class="tab_content">
tab2
</div>
<div id="tab3" class="tab_content">
tab3
</div>

CSS:

.tab_content {
border: 1px solid #ccc;
background: #fff;
padding: 20px;
height: 250px;
position: absolute;
top: 150px;
left: 0;
width: 600px;
}
div:first-of-type{
z-index:1;
}
div:target{
z-index:1;
}