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

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