<!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. Web面试之JQuery

    程序员Web面试之JQuery   又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了 ...

  2. WCF、Web API、WCF REST、Web Service 区别

    Web Service It is based on SOAP and return data in XML form. It support only HTTP protocol. It is no ...

  3. 如何给非AppCompatActivity添加Toolbar？--关于5.0新特性兼容5.0以下设备的探索

    Android支持包22.1引进了AppCompatDelegate 最新22.1版本的支持包引入了大量酷炫的新特性,这些特性将允许我们轻易地将材料设计/API 21+的特性应用到之前的那些老的,不兼 ...

  4. Objective-c 总结（一）：OC类的设计

    (一)学习目标: 1.面向对象基本概念: OOP的主要思想是把构成问题的各个事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描述一个事物在整个解决问题步骤中的行为. 2.熟悉OC类的定 ...

  5. C#事件与委托的区别

    C#事件与委托的区别 1. 委托 事件是利用委托来定义的,因此先解释委托.委托是一个类,它与其他类如int,string等没有本质区别,int代表的是所有的整形,而string代表的是字符串,委托则代 ...

  6. Java多线程学习笔记--生产消费者模式

    实际开发中,我们经常会接触到生产消费者模型,如:Android的Looper相应handler处理UI操作,Socket通信的响应过程.数据缓冲区在文件读写应用等.强大的模型框架,鉴于本人水平有限目前 ...

  7. 在 Ubuntu 12.04 上通过 Tomcat 部署 Solr 4

    http://www.oschina.net/question/12_71342 可行

  8. 静态页面调试JS出现跨域问题

    在chrome浏览器或者firefox浏览器里,由于安全限制的原因,本地调试JS,如果不配服务器环境而直接打开页面,那所有的AJAX操作会抛出下面错误: XMLHttpRequest cannot l ...

  9. Model 验证

    [ASP.NET MVC 小牛之路]16 - Model 验证 上一篇博文 [ASP.NET MVC 小牛之路]15 - Model Binding 中讲了MVC在Model Binding过程中如何 ...

  10. Load ContextCLR 探测

    目录 背景Load ContextCLR 探测过程弱签名程序集的探测过程强签名程序集的探测过程Default ContextLoad-From ContextNo ContextRelfection- ...