互聯網 - 大數據

實現原理利用: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;
}

 效果：

當然還有其他可以做的，暫時沒想到，有新想法再更新。