<!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. serialVersionUID行动

    ORIGINAL:未知 Java断类的serialVersionUID来验证版本号一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地对应实体(类)的seria ...

  2. ThoughtWorks Merchant's Guide To The Galaxy

    ThoughtWorks笔试题之Merchant's Guide To The Galaxy解析 一.背景 在某网站上看到ThoughtWorks在武汉招人,待遇在本地还算不错,就投递了简历.第二天H ...

  3. PHP中的表单提交和获取

    在php中表单提交的方式有两种: 1.post提交,这种安全性较高. 2.get提交,他提交的是一个url地址,因此在从地址上面就可以看到许多信息,因此不安全. 每个表单<form>后面都 ...

  4. SpecFlow

    SpecFlow http://blog.csdn.net/yujunwu2525/article/details/7839859 将业务需求与.NET代码结合起来 SpecFlow旨在弥合领域专家与 ...

  5. 模仿c的字符转整数函数 atoi

    #include<stdio.h> , KInvalid}; int g_nStatus = KValid; long StrToIntCore(char *str,bool minus) ...

  6. 对"一维最大子数组和"问题的思考

    对"一维最大子数组和"问题的思考(homework-01) 一维最大子数组和问题,即给定一个数组,在它所有的连续子数组的和中,求最大的那个和.“最大子数组和”是一个很好的IT面试考 ...

  7. MVC几种传值方式

    一,Model public class Course { public int Id { get; set; } public string Name { get; set; } } public ...

  8. SQLSERVER数据库自动备份工具SQLBackupAndFTP(功能全面)

    挺好用的SQLSERVER数据库自动备份工具SQLBackupAndFTP(功能全面) 这个工具主要就是自动备份数据库,一键还原数据库,发送备份数据库日志报告到邮箱,自动压缩备份好的数据库 定期执行数 ...

  9. js框架漫谈

    现在实际项目中可供选择的javascript框架很多,热门的有jquery,dojo,mootools,ext等.这些框架按照不同的标准有不同的分类方法,比如按照扩展方式便可分为prototype式的 ...

  10. JAVA实现数据库数据导入/导出到Excel（POI）

    准备工作: 1.导入POI包:POI下载地址http://mirrors.tuna.tsinghua.edu.cn/apache/poi/release/src/(重要) 如下 2.导入Java界面美 ...