您的位置：首页 > 网站优化 > css  >  利用CSS3制作漂亮TAB选项卡方法介绍

利用CSS3制作漂亮TAB选项卡方法介绍

 更新时间：2017年7月6日 23:13  点击：2693
TAB选项卡是一个非常不错可以在同样大小的空间中放更多的内容了，现在我们看很多门户网站都有这个功能，可能大家见得最多的就是QQ弹窗了，有很多的分类可以进行切换的哦。

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

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


第一种：:checked

首先像平常写HTML和CSS一样，不过要使用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均可以使用

[!--infotagslink--]

相关文章

  • 浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧...2021-10-21

  • 基于Ionic3实现选项卡切换并重新加载echarts

    这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24

  • Bootstrap选项卡学习笔记分享

    这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-02-19

  • JS+CSS实现仿msn风格选项卡效果代码

    本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码。分享给大家供大家参考，具体如下：这是一款来自MSN网站的选项卡，清新淡蓝色风格，新闻类、资讯类、文章类网站都比较适合使用，代码扩展性高，W3C标准设计，兼容IE、火狐等多种...2015-10-23

  • 利用CSS3制作漂亮TAB选项卡方法介绍

    TAB选项卡是一个非常不错可以在同样大小的空间中放更多的内容了，现在我们看很多门户网站都有这个功能，可能大家见得最多的就是QQ弹窗了，有很多的分类可以进行切换的哦。...2017-07-06

  • 简单实现js选项卡切换效果

    这篇文章主要为大家介绍了简单实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-02-05

  • PHP中print_r、var_export、var_dump用法介绍

    文章详细的介绍了关于PHP中print_r、var_export、var_dump区别比较以及这几个在php不同的应用中的用法，有需要的朋友可以参考一下 可以看出print_r跟var_export都...2016-11-25

  • Vue.js组件tabs实现选项卡切换效果

    这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-12-02

  • Framewrok7 视图介绍（views、view）使用介绍

    下面我们来看一篇关于Framewrok7 视图介绍（views、view）使用介绍吧，希望这篇文章能够帮助到各位朋友。 一、Views 与View的介绍 1，Views (<div class="views">) （1）Vi...2016-10-02

  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动，滚动到底部带信息提示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...2015-03-15

  • js编写选项卡效果

    这篇文章主要为大家详细介绍了js编写选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27

  • Monolog PHP日志类库使用详解介绍

    PHP日志类库在低版本中我们都没有看到了但在高版本的php中就有了，下面我们来看一篇关于PHP日志类库使用详解介绍吧． Monolog遵循PSR3的接口规范，可以很轻易的替换...2016-11-25

  • php获取当前url地址的方法介绍

    这篇文章介绍了php获取当前url地址的方法小结，有兴趣的同学可以参考一下 本文实例讲述了php获取当前url地址的方法。分享给大家供大家参考，具体如下： js 获取： ...2017-01-22

  • PHP-GTK 介绍及其应用

    1. PHP-GTK介绍 1.1 PHP-GTK PHP-GTK是PHP的延伸模组，它可以让程式设计师写出在客户端执行的、且独立的GUI的程式。这个模组不允许在浏览器上显视GTK+的程式，它一开始就...2016-11-25

  • PHP 获取文件目录权限函数fileperms介绍

    在php中要获取或目录权限我们可使用fileperms函数来获取，fileperms() 函数返回文件或目录的权限,。若成功，则返回文件的访问权限。若失败，则返回 false。 例子 1 ...2016-11-25

  • 很棒的Bootstrap选项卡切换效果

    这篇文章主要为大家分享了一款很棒的Bootstrap选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-07-06

  • 不错的mod_perl编程的简单应用实例介绍

    介绍性指南 mod_perl 是个庞大而复杂的工具，它内建了许多模块帮助你方便地构建动态网站。这篇指南的目的是帮助你构建一个良好的 mod_perl 模块，并从中理解 mod_perl 的实现...2020-06-29

  • php设置时区方法介绍

    php默认时区是欧美国家的所以与我们中国时区相差了整整8小时哦，下面我来给各位介绍php设置时区方法，有需要了解的朋友可进入参考。 在 php.ini 中，默认是 date.timez...2016-11-25

  • OpenCart网站迁移步骤详细介绍

    OpenCart是国外著名的开源电子商务系统，由英国人Daniel一人独立开发，其社区非常活跃，由各国网友翻译出来的语言包已经达到18种，其中包括中文，俄文，法文，西班牙文，德文等等，下面...2016-10-10

  • Mysql创建数据库和独立数据库帐号方法介绍

    本文章来给各位同学介绍phpMyadmin创建Mysql数据库及独立数据库帐号建立，如果你不会mysql命令来创建数据库之类的我们可以使用phpmyadmin来完成哦。 phpMyadmin创...2016-11-25