<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>纯CSS实现tab选项卡切换</title>
    <style media="screen">
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background-color: #2DB7F5;
        color: #08172F;
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      input[name='toggle'] {
        display: none;
      }
      nav {
        margin-top: 20px;
      }
      nav ul {
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 0;
      }
      nav ul {
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      nav ul li {
        display: inline-block;
        width: 33.33%;
        height: 100%;
        font-size: 14px;
      }
      nav ul li label {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #1F5AA3;
        color: #fff;
      }
      main {
        position: absolute;
        height: 200px;
        width: 100%;
        background: white;
        color: #1F5AA3;
        padding: 10px
      }
      .container {
        display: none;
      }
      #tab1:checked~nav label[for='tab1'] {
        background-color: #fff;
        color: #1F5AA3;
      }
      #tab1:checked~main .tab1-container {
        display: block;
      }
      #tab2:checked~nav label[for='tab2'] {
        background-color: #fff;
        color: #1F5AA3;
      }
      #tab2:checked~main .tab2-container {
        display: block;
      }
      #tab3:checked~nav label[for='tab3'] {
        background-color: #fff;
        color: #1F5AA3;
      }
      #tab3:checked~main .tab3-container {
        display: block;
      }
    </style>
  </head>
  <body>
    <input type="radio" name="toggle" id="tab1" checked/>
    <input type="radio" name="toggle" id="tab2" />
    <input type="radio" name="toggle" id="tab3" />
    <nav>
      <ul>
        <li><label for="tab1">tab1</label></li>
        <li><label for="tab2">tab2</label></li>
        <li><label for="tab3">tab3</label></li>
      </ul>
    </nav>
    <main>
        <section class="container tab1-container">
          <p>
            这里是第一个tab页的内容
          </p>
        </section>
        <section class="container tab2-container">
          <p>
            这里是第二个tab页的内容
          </p>
        </section>
        <section class="container tab3-container">
          <p>
            这里是第三个tab页的内容
          </p>
        </section>
    </main>
  </body>
</html>

一直都是用配合着js实现的，今天看到群里发了这个，还真是眼前一亮，学习了。

来自群里大神的git：https://github.com/Jiasm/qq-share/blob/master/css/tab/index.html

纯CSS实现tab选项卡切换的更多相关文章

  1. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  2. 史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼

    下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...

  3. CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  4. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  7. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  9. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

随机推荐

  1. 【转载】深度解析Android中字体设置

    原文:http://mobile.51cto.com/android-265238.htm 1.在Android XML文件中设置字体 可以采用Android:typeface,例如android:t ...

  2. php中使用随机数

    <?phpsession_start();$s = array("a","b","c","d","e&q ...

  3. Angularjs 与Ckeditor

    Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块 ...

  4. 【值得收藏】Mathematica数值计算工具的学习资料汇编【可免费下载】

    Mathematica学习教程 Mathematica是一款科学计算软件,很好地结合了数值和符号计算引擎.图形系统.编程语言.文本系统.和与其他应用程序的高级连接.Mathematica与Matlab ...

  5. strus2 action重复执行问题

    近日做项目,有两个模块功能类似,就写到了一个action中,方法起名为getXXX1,getXXX2 最后在两个模块去调用的时候,分别调用DemoAction!getXXX1.action和DemoA ...

  6. 错误与修复：ASP.NET无法检测IE10,IE11，导致_doPostBack未定义JavaScript错误，恒处于F5卷动条位置

    <browsers>  <browser id="IE11" parentID="Mozilla">    <identifica ...

  7. EPROCESS KPROCESS PEB

    EPROCESS KPROCESS PEB <寒江独钓>内核学习笔记(2)     在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结 ...

  8. MVC一些需要注意的问题

    不使用MVC,不知道MVC的好处,但是也会有一些坑,需要注意一下: 比如控件中添加HTML5自定义属性,以为是这样: @Html.TextBox("date",Model.Date ...

  9. 基于认证的代理平台搭建配置squid-20130730

    基于认证的代理平台搭建配置squid-20130730 功能:通过squid代理实现 (1)基于用户名密码认证的出口ip路由选择 (2)基于client源ip的出口ip路由选择 (3)基于连接本机ip ...

  10. [转]How to compile GDB for iOS!

    ref:http://reverse.put.as/2012/04/16/how-to-compile-gdb-for-ios/ source code: http://www.opensource. ...