<!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. jQuery MiniUI

    今天找到一个关于jQuery的又一个不错的UI,特此保存下.备用. http://www.miniui.com/

  2. Mysql高级之主从复制

    原文:Mysql高级之主从复制 主从复制不就是多台服务器嘛!,一个改变另一个也改变啦,内容其实都一样! 原理: 对数据库进行操作会生成一个文件,binlog(二进制文件),从服务器配置relaylog ...

  3. 网页头一定要加的代码段（加注版）一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

      网页头部常见的一段代码 <!--[if lt IE 7 ]><html class="ie6"><![endif]--> <!--[i ...

  4. php中session和cookie

    cookie 每次请求页面的时候进行验证,如果用户信息存储在数据库中,每次都要执行一次数据库查询,给数据库造成多余的负担.cookie可以被修改的,所以安全系数太低. session是存储在服务器端面 ...

  5. Ibatis 返回datatable数据类型案例

    /// <summary> /// 查询实体 [DataSet数据集] /// </summary> /// <param name="statementNam ...

  6. SQL Server 增删改

    --use用来设置当前使用哪个数据库use StudentDb--go批处理go --T-SQL中不区分大小写,数据库表中的数据是区分大小写的--例如:insert与INSERT不区分大小写,数据库表 ...

  7. openGL绘制正方形

    /** * 缓冲区工具类 */public class BufferUtil { /**  * 将浮点数组转换成字节缓冲区  */ public static ByteBuffer arr2ByteB ...

  8. Memcached安装配置最大使用内存

    Memcached安装配置最大使用内存 项目做了很多,虽然用memcached的项目也有很多.但是没有太关注安装memcached细节问题 最近做了一个项目,把很多东西都放到memcached缓存中, ...

  9. Oracle 10g数据库概述

    一.Oracle 10g简介 1.Oracle 10g数据库是首个为网咯计算而设计的数据库(甲骨文公司的一款关系数据库管理系统). 2.分为以下几个版本: a.Oracle 10g数据库标准版 1 b ...

  10. [转]About the security content of iOS 8

    Source:http://support.apple.com/kb/HT6441 For the protection of our customers, Apple does not disclo ...