CSS实现点击事件及实践

实现原理利用: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;
}

效果：

当然还有其他可以做的，暂时没想到，有新想法再更新。