aaarticlea/png;base64,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" alt="" />

代码文件如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>radio选项卡切换</title>

     <style type="text/css">

         *{margin:0;padding:0;}

         .test-box{width: 50%;margin: 10px auto 0;padding-top: 25px;position: relative;}

         .test-box>.test-tab{width:100%;}

         .test-box .test-label{background-color: #eee;display: inline-block;width: 25%;text-align: center;font-size: 16px;line-height: 24px;box-sizing: border-box;}

         .test-label{position: absolute;top: 0;border:solid #ccc; border-width:1px 0px 1px 1px;}

         .test-tab:nth-child(1) .test-label{left: 0;}

         .test-tab:nth-child(2) .test-label{left: 25%;}

         .test-tab:nth-child(3) .test-label{left: 50%;}

         .test-tab:last-child .test-label{border-right-width:1px;}

         .test-box .content{background-color: #fff;height: 20px;display: none;border:1px solid #ccc;}

         .test-box input.test-radio{display: none;}

         .test-box input:checked~.test-label{background-color: #fff;border-bottom: 1px solid #fff;}

         .test-box input:checked~.content{display: block;}

     </style>

 </head>

 <body>

     <div class="test-box">

         <div class="test-tab">

             <input type="radio" class="test-radio" id="radio1" name="test-radio" checked>

             <label for="radio1" class="test-label">选项卡1</label>

             <div class="content"><P>asdasdsad1</P></div>

         </div>

         <div class="test-tab">

             <input type="radio" class="test-radio" id="radio2" name="test-radio">

             <label for="radio2" class="test-label">选项卡2</label>

             <div class="content"><P>asdasdsad2</P></div>

         </div>

         <div class="test-tab">

             <input type="radio" class="test-radio" id="radio3" name="test-radio">

             <label for="radio3" class="test-label">选项卡3</label>

             <div class="content"><P>asdasdsad3</P></div>

         </div>

     </div>

 </body>

 </html>

利用radio实现纯css选项卡切换的更多相关文章

  1. HTML自定义radio单选按钮(纯css版,样式可以随意改变)

    html: <div> <input id="item1" type="radio" name="item" value= ...

  2. 纯CSS选项卡

    html: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 使用jQuery+css实现选项卡切换功能

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  6. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  7. 纯 CSS 利用 label + input 实现选项卡

    clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...

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

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

  9. 纯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 ...

随机推荐

  1. Lua 字符串 匹配模式 总结

    字符类 %a --字母alpha %d --数字double %l --小写字母lower %u --大写字母upper %w --字母和数字word %x -- 十六进制 %z --代表0 zero ...

  2. smarty模板引擎中section循环loop与total的区别

    在smarty模板引擎的section循环中 $data=[101,102,103,105,104]; section的两个属性total与loop {section foo $data start= ...

  3. B'day Gift

    def main(): n = int(raw_input()) sum = 0 for i in range(n): sum += float(raw_input()) print '%.1f' % ...

  4. Java学习笔记--AWT事件处理

    1.事件模型 在整个事件触发和相应的过程中,主要涉及一下3类对象 (1) 事件源 : 引起时间的GUI对象,如各类组件(Button,Label,TextField),容器组件(Frame,panel ...

  5. 前端面试题之js篇

    前端面试也可为是鱼龙混杂,各公司面试题的种类也大不相同,有的公司注重基础语法,面试题偏于ES,有的公司偏于页面逻辑,会考差一些js的应用,现将遇到过的题和典型的题整理一下. 1. 0.2-0.1 == ...

  6. LeetCode_Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...

  7. .NET自动字符编码识别程序库 NChardet

    什么是NChardet NChardet是mozilla自动字符编码识别程序库chardet的.NET实现,它移植自jchardet,chardet的java版实现,可实现对给定字符流的编码探测. N ...

  8. DLNA架构在机顶盒上播放云存储文件的实现

    DLNA 架构在机顶盒上播放云存储文件的实现   摘要: 随着越来越多的数码设备,音像设备等对 UPNP 协议的支持和普及,业界对多媒体内容提供服务的需求越越来越强烈,为了实现遵循 UPNP 协议和  ...

  9. Powershell --在线学习

    介绍和安装 自定义控制台 快速编辑模式和标准模式 快捷键 管道和重定向 Powershell交互式 数学运算 执行外部命令 命令集 别名 通过函数扩展别名 执行文件和脚本 Powershell变量 定 ...

  10. 2 _RESETFUL介绍

    2.2 CURL 命令的讲解: 1.就是以命令的方式来执行HTTP 协议的请求的工具 2.可以通过CURL 操作HTTP的GET/POST/PUT/DELETE方法 jrhmpt01:/root# c ...