写在最前
今天突发其想,css实现元素的显隐以及纯CSS实现选项卡,于是呼百度GG一番,结果还晨鑫旭大哥网站上找到了方法,自己稍加整理内容如下,其运用到的技术CSS的"~"同级元素高级选择器和css3的:checkbox伪类,:checkbox其实就是表单元素checkbox的选中状态,js里经常用到这个。
css实现元素显隐
这里是默认显示的内容 更多的内容在这里!
css实现选项卡
这里其实跟上面的CSS显隐元素思路是一样的,也是根据表单元素:checked状态来做的,只是这里做的是选项卡所以表单元素也就换成了radio
选项卡一对应的内容
选项卡二对应的内容
选项卡三对应的内容
写在最后
在高科技发达的中国,在全民过上幸福生活的天朝,在现代浏览器中以上代码表现良好,但在ie6~ie8,上面的可以直接拉去斩了。不得不说现实的残酷,根据自己的需求来制作页面应该才是最好的。
如果要想在这基础上实现一些动画效果可以借助强大的CSS3动画属性
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!