【转】纯CSS3制作的Tab选项卡
2016-06-06 21:34
666 查看
在制作CSS TAB选项卡的时候一般都会用上JS,但CSS3的出现却可以实现无JS的方法,下面我们一起看看用纯CSS来制作一个选项卡的方法。使用纯CSS3来制作Tab的好处除了不需要使用jQuery外,还支持添加一些细微的CSS3交互,使Tab展示效果不错。
PS:另外设计达人网还介绍过另一种纯CSS3 Tab的实现,请查看《实用CSS3属性之
:target伪类实现Tab切换效果》
制作前先看看演示:查看DEMO
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。
关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况。
HTML代码
CSS代码
PS:另外设计达人网还介绍过另一种纯CSS3 Tab的实现,请查看《实用CSS3属性之
:target伪类实现Tab切换效果》
制作前先看看演示:查看DEMO
代码
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况。
HTML代码
<ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">选项卡 1</label> <div id="tab-content1" class="tab-content"> <p>选项卡内容 1</p> </div> </li> <li> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">选项卡 2</label> <div id="tab-content2" class="tab-content"> <p>选项卡内容 2</p> </div> </li> </ul>
CSS代码
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { padding: 20px; text-align: left; font-family: Lato; color: #fff; background: #9b59b6; } .tabs { width: 650px; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; text-align: left; } .tabs li { float: left; display: block; } .tabs input[type="radio"] { position: absolute; top: -9999px; left: -9999px; } .tabs label { display: block; padding: 14px 21px; border-radius: 2px 2px 0 0; font-size: 20px; font-weight: normal; text-transform: uppercase; background: #8e44ad; cursor: pointer; position: relative; top: 4px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: #703688; } .tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: #612e76; } .tabs [id^="tab"]:checked + label { top: 0; padding-top: 17px; background: #612e76; } .tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block; }
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页