CSS实现点击事件及实践

实现原理利用:target，把a标签自身的href以及id设置成一样的。

案例1：实现元素的切换

HTML：

我是P1的内容

我是P2的内容

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:

• 标签一
• 标签二
• 标签三

tab1

tab2

tab3

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;

}

效果：

当然还有其余可以做的，暂时没想到，有新想法再升级。