利用CSS3后代选择器和CSS3伪类制作的无JS的纯CSS选项卡 [ie8+]

写在最前

今天突发其想,css实现元素的显隐以及纯CSS实现选项卡,于是呼百度GG一番,结果还晨鑫旭大哥网站上找到了方法,自己稍加整理内容如下,其运用到的技术CSS的"~"同级元素高级选择器和css3的:checkbox伪类,:checkbox其实就是表单元素checkbox的选中状态,js里经常用到这个。

css实现元素显隐

这里是默认显示的内容 更多的内容在这里!

css实现选项卡

这里其实跟上面的CSS显隐元素思路是一样的,也是根据表单元素:checked状态来做的,只是这里做的是选项卡所以表单元素也就换成了radio

选项卡一对应的内容

选项卡二对应的内容

选项卡三对应的内容

写在最后

在高科技发达的中国,在全民过上幸福生活的天朝,在现代浏览器中以上代码表现良好,但在ie6~ie8,上面的可以直接拉去斩了。不得不说现实的残酷,根据自己的需求来制作页面应该才是最好的。

如果要想在这基础上实现一些动画效果可以借助强大的CSS3动画属性