<!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. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

    原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...

  2. 水晶报表使用经验谈－－使用sql语句直接生成dataset做为报表的数据源

    概述: 上一次自己做了直接在rpt文件里使用oledb连接使用数据库的方法 但是不是很灵活 这次做了使用sql语句直接生成dataset做为报表的数据源(即push模式),这样就可以接受参数了.当然报 ...

  3. cocos2d-x的TestCpp分析

    最近,我刚开始学coco2d-x 我会写我的学习经验来 首先TestCppproject有许多例子文件夹,而在这些文件夹以外的其他文件 .我首先研究这些文件: controller.h/cpp:管理方 ...

  4. Linux环境下搭建php开发环境的操作步骤

    本文主要记载了通过编译方式进行软件/开发环境的安装过程,其他安装方式忽略! 文章背景: 因为php和Apache等采用编译安装方式进行安装,然而编译安装方式,需要c,c++编译环境, 通过apt方式安 ...

  5. VS 文件自动定位功能

    在Visual Studio 中,当你在所有打开的文件中进行切换时,在Solution Explorer中也会自定定位到这个文件的目录下面,这个功能用来查找当前文件是非常有用.在Tools->O ...

  6. Varnish缓存服务

    Varnish缓存服务详解及应用实现   1.varnish的基本介绍   Varnish 的作者Poul-Henning Kamp是FreeBSD的内核开发者之一,他认为现在的计算机比起1975年已 ...

  7. Node填坑教程——过滤器

    所谓“过滤器”,只是一个概念,可以理解是一个路由,也可以理解为一个中间件.原理非常简单,就是利用匹配规则,让其有限匹配在正常的路由前面处理就行了. 比如有如下路由 app.get('/', funct ...

  8. 看精通SQL SERVER2008有感1

    SQLserver数据库中的其他数据库作用: Master:存储SQLserver所有的全局配置,也就是存储SQLserver所知道的关于自己的全部信息,包括自身的配置,和当前的状态,这些数据存储在系 ...

  9. c#XML配置文件辅助类

    在开发中经常会用到各种kv类型的配置 文件,像这样的 <?xml version="1.0" encoding="utf-8" ?> <sou ...

  10. 自定义ModelValidatorProvider

    MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息 Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.Compone ...