最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
利用CSS3制作漂亮TAB选项卡方法介绍
时间：2022-06-25 13:44:10 编辑：袖梨 来源：一聚教程网
这个CSS3 Tab样式已经写出来很久了，一直没有时间把它分享出来，也许网上还有其他很多这样子的代码，但没有一种是用到我说的:checked来做的，不管如何，多掌握一种方式对你也是有帮助的。
效果就如博客之前写过的一个Tab一样：有最新文章、热门文章和随机文章。
第一种：:checked
首先像平常写HTML和CSS一样，不过要使用input的radio来做为点击后选择的内容。通过input:checked来隐藏和显示需要对应的内容。
HTML代码如下：
| 代码如下 | 复制代码 |
注意点：有几个标签页，就需要对应添加几个input，同时每个input的name必须设置为一致，同时这些input必须放在最前面，通过选择后来使用CSS3的同级元素链接符来改变样式。而Tab里面的“最新博文、热评博文、随机博文”都要用label包围起来，配上相对应的for.
CSS代码如下：
| 代码如下 | 复制代码 |
|
.widget-tab input{display:none} |
|
第二种：:target
前面说过CSS3的动画制作方式有两种分别是:target和:checked一样，这个tab同样可以用:target来实现，不过实现起来比用:checked相比，体验差了很多，因为它点击了锚点，从而让链接也发生了跳转，给人一种很突然的感觉。思路是通过点击:target时令对应的z-index变大，重复覆盖在上一层。
HTML代码
| 代码如下 | 复制代码 |
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均可以使用