html5纯 css tab切换效果,纯CSS3制作的Tab选项卡

纯CSS3制作的Tab选项卡

10月 14, 2013

评论 (4)

Sponsor

在制作CSS TAB选项卡的时候一般都会用上JS，但CSS3的出现却可以实现无JS的方法，下面我们一起看看用纯CSS来制作一个选项卡的方法。使用纯CSS3来制作Tab的好处除了不需要使用jQuery外，还支持添加一些细微的CSS3交互，使Tab展示效果不错。

PS:另外设计达人网还介绍过另一种纯CSS3 Tab的实现，请查看《实用CSS3属性之 :target伪类实现Tab切换效果》

制作前先看看演示：查看DEMO

代码

这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。

关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。

HTML代码

• 选项卡 1

  选项卡内容 1

• 选项卡 2

  选项卡内容 2

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;

}

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

SWORD -

2015 年 06 月 03 日 下午 7:12

非常强悍！

API -

2014 年 07 月 10 日 下午 4:59

感謝分享

第十一颗行星 -

2013 年 10 月 14 日 下午 4:35

真是越来越恨IE

诸葛小觉 -

2013 年 10 月 14 日 下午 3:38

用这个代表着要放弃IE方面的流量了..决心好大啊！！鸭梨也是啊！！

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站