纯CSS3制作TAB选项卡的两种方式

文章目录

这个css3 Tab样式已经写出来很久了,一直没有时间把它分享出来,也许网上还有其他很多这样子的代码,但没有一种是用到我说的:checked来做的,不管如何,多掌握一种方式对你也是有帮助的。

效果就如博客之前写过的一个Tab一样:有最新文章、热门文章和随机文章。

css3-tab1

第一种::checked

首先像平常写HTMLCSS一样,不过要使用input的radio来做为点击后选择的内容。通过input:checked来隐藏和显示需要对应的内容。

HTML代码如下:

<div class="widget widget-tab">
<input type="radio" name="widget-tab" id="new" checked="checked"/>
<input type="radio" name="widget-tab" id="hot"/>
<input type="radio" name="widget-tab" id="random"/>
<div class="widget-title inline-block">
<ul>
<li class="new">
<label for="new">最新博文</label>
</li>
<li class="hot">
<label for="hot">热评博文</label>
</li>
<li class="random">
<label for="random">随机博文</label>
</li>
</ul>
</div>
<div class="widget-box">
<ul class="new-list">
<li>……</li>
</ul>
<ul class="hot-list">
<li>……</li>
</ul>
<ul class="random-list">
<li>……</li>
</ul>
</div>
</div>

注意点:有几个标签页,就需要对应添加几个input,同时每个input的name必须设置为一致,同时这些input必须放在最前面,通过选择后来使用CSS3的同级元素链接符来改变样式。而Tab里面的“最新博文、热评博文、随机博文”都要用label包围起来,配上相对应的for.

CSS代码如下:

.widget-tab input{display:none}
.widget-tab .widget-box ul{display:none}
#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#F7F7F7}
#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}

在线演示

第二种::target

前面说过CSS3的动画制作方式有两种分别是:target和:checked一样,这个tab同样可以用:target来实现,不过实现起来比用:checked相比,体验差了很多,因为它点击了锚点,从而让链接也发生了跳转,给人一种很突然的感觉。思路是通过点击:target时令对应的z-index变大,重复覆盖在上一层。

HTML代码

<div class="tab-wrap">
<div class="tab-title" id="tabTitle">
<ul class="clearfix">
<li><a href="#tab1">最新文章</a></li>
<li><a href="#tab2">热门文章</a></li>
<li><a href="#tab3">随机文章</a></li>
</ul>
</div>
<div class="tab-content">
<ul id="tab1">
<li>……</li>
</ul>
<ul id="tab2">
<li>……</li>
</ul>
<ul id="tab3">
<li>……</li>
</ul>
</div>
</div>

CSS代码

.tab-content{position: relative; min-height:200px; border:1px solid #ddd; margin-top:-1px;}
.tab-content ul{position: absolute; min-height: 100px; left:0; top:1px; padding:10px; background: #fff;}
#tab1:target, #tab2:target, #tab3:target{z-index: 1;}

在线演示

注意点:如果要实现点击时标题的active状态发生变化,则要将标题放在内容的后面,显示很不符合HTML的思路。所以个人推荐使用:checked来使用,不但简单,符合语义,而且不需要考虑CSS定位引起的问题。在CSS ticks上找到的这篇CSS3 Tab里面都是讲用:target来做的方法,不过本人不推荐用这种方法。

演示地址

浏览器兼容情况

不支持IE8及其以下浏览器

Chrome、Firefox、360均可以使用

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:(http://caibaojian.com/css3-tabs.html)
转发请注明来自前端开发博客

发表评论

请登录后发表评论:

“纯CSS3制作TAB选项卡的两种方式”有24个评论

  1. 何烨坪Echo

    棒,赞一个

    登录回复
  2. 何烨坪Echo

    登录回复
  3. 小__标

    支持一个

    登录回复
  4. 鱼鱼鱼鱼鱼你妹

    很好

    登录回复
  5. 曌璟

    楼主,让我看到代码全貌 ,谢谢谢谢

    登录回复
  6. 曌璟

    指条明路吧:P

    登录回复
  7. tyst2005

    学习了

    登录回复
  8. 飞人类类类

    看看

    登录回复
  9. 呔你这妖精

    登录回复
  10. 卿轻言戏语

    学习学些

    登录回复
  11. IT呆槑

    登录回复
  12. Mrcxt

    学习了

    登录回复
  13. 关节-闫

    想学习

    登录回复
  14. 柚子皮网

    不错

    登录回复
  15. 随影66

    hao

    登录回复
  16. 亦枫

    看看

    登录回复
  17. 白衣剑客2012

    good,太好了

    登录回复
  18. 爱吃的空中飞人

    没有弄过,学习下

    登录回复
  19. 张明剑13420

    好难

    登录回复
  20. NJ-木白

    想学习

    登录回复
  21. 胡老六

    [呵呵]

    登录回复
  22. 小武kitty

    棒棒哒[挤眼]

    登录回复
  23. yijile

    这个不错[哈哈]

    登录回复