aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEXuZlH04+iNWMdGE3sJJvQX/ARe10MUYPELtfp/onLG5VIlSf0gCNw8AAIAimrNPAAAAWEHsAAAAhRA7AABAIcQOAABQCLEDAAAUQuwAAACFEDsAAEAhb4gdvwAAk45XEFjznthxfCdQ6vf39w7DuAAso/PHDsQOHELVMY4LwDI6f+xA7MAhVB3juAAso/PHDsQOHELVMY4LwDI6f+xA7MAhVB3juAAso/PHDuZix9Bd+pv7762/NN0w/cP7JOrWX5qU+NZDt2G3immrOtf26/vH/ffn+6tpr9M/vE+ifr6/ku0f3/rabtitZrouAJr/vXR1/qiEudjxGLpmDBqPh0gd8dgxdH7Xsmy3Naa8EjvcuWiiq+rc7/dr24yV5n4XZSded66t3/7Ldlvr1Ja649UycQQllF0A1TW/PIq+hKKs80cd7MUOGTwygxciK0TzwNY4sU4u4e7l94gdBbjKk7l7FRXAFSd/J5uKxLp0rXb/8/0ljnVt9SUPdRdATc0/nsK0d/9a0EFd548aWIwdS46Q0SEzeiFjRzKopDLIlnjiogmxo4S5kMjakbl9lXUnWalS5SJfn4KjXlttlUffBVBP86+be+sYSj30df6ogMnYMfESwQuxI8gGuQmXp7Fj6MbQcusvxI6ivJLwQt0Jbn1z1eLFyX2VhefsU9inwuZXGTrP7oGgj63YsQwrhOX99djhz9UcGe1Y9kzs+FvLkHc4kfF63fEH699Td+SYuxKKLoDKm19h4xM7sIet2PF4PJbkkFh0IcRGOPKxI/egS2CVRogdhUylIzHrLsRucfN1J/ekQyBSjljb8feqbP75bHQNddyJHdjFbuxYuPGIxMhEOnZM3976VMvT0yJ2FLAeKHc3pIlb03Tdmb79npmRsWgpCx1qY8eiluaf96TrCtDW+aMKxI5okAhWm+6OHUPXXLpuw6OxxI5CVnUnWkmC5Ya76861bb7aNrIiIDwpZRVnou0CqLL55fdVDXlo6/xRBfOxY+iaWNYIY8cYC3rvRR/Tbp7EjjF3NOmnXZadEDsK8OuO7OezdWe8E/323vQgnnzM1J2x8GSG0PVmjrv22FFD8wffJ3bgs5mOHeNSDBcG/PELsYSjaZrGvcy0G9yfn77h1N9nk04WxI5C/HdEyV7ev4EVc/hurn/5YPrz01dc+vuMpAvVmeOuOXac3/zBpIq6WRZtnT+qYC92eA+srsKCWGZ66W/+UEjwvW4Ickv8cPLz9FvBiB1lXNux1sRezrR+YWTq3nNe+rkuXPHDyc/HI/h326rqTEDZBVBX8/vtr/B9Yco6f9TBVuyYo8aBEh8mjfz7RSPLVOODI8SOvzf36wduKsNSE5QST2Sdors7Tjz6oCqGKLoAamt+uQOFLX+/Ezuwi63YIX8H7vnDrusMkMkX6WkWfgquIvKHwJ4/7biuAZkCkx5n//TfAtMUO2j+t1PU+aMetmLHCYgdtn163dEUO07w6c1P548diB04hKpjHBeAZXT+2IHYgUOoOsZxAVhG548diB04hKpjHBeAZXT+2IHYgUOoOsZxAVhG548d3hA7/v37d3wnUOoXAGDVjqrBaAcAAHgZsQMAABRC7AAAAIUQOwAAQCHKY0fqV9d2ee/vm8RP7dNfPwoAQAaxw/nz2LHhp2cBAPhgxA7nT2OH+w05YgcAwKqzY4f/i66i5nsfeFlg/EnXsYD3fm13HzWxn5mPlH1xmK73YseWTbae2rhJN7w3JgEAoMypscMfXrj1l7km34IAMNfqoXOlfqr/8iNX0sUXvQ/krsURl8iwZZPYKWdPbUHsAABYdmbsuPUXrwa7kp6qzutpEFn2h84felj2kZw7WR/F5YbkJulTzp1a+pAAAFhy9iTL4/Hwpy3caENktGAdLaJlXMyOiLGT9XxIGCFkckhssvquPOVNp0bsAACYdv4kiyvdkQkMP4yEgxAyOsiFFbfonIu/UiOMAH50iC7uSJ1y/tS8IxA7AABWnRk71jU4MbUhHjvNDCkEGycq/Bgm5qSQGu1IbBLs1J8XYrQDAICcE2PHf7F1EvFpjbmmZxZQxJZ2xCv8EjfSaztSm0SXdrC2AwCAbc4e7Vgq9Tx7EQkEsqInHxfxy/w8QRLJKmLfySdZkpukT5knWQAAeObcJaVy/calv8nCnXwFR/q9HXKTbpCZIv2qjeR7O1KbZE45+0oR9wViBwDAqiqeZAEAABYQOwAAQCHEDgAAUAixAwAAFHJm7AAAANacEzsAAAC2IHYAAIBCiB0AAKAQYgcAACiE2AEAAAohdgAAgEKIHQAAoBBiBwAAKITYAQAACiF2AACAQogdAACgkP8BTARl0YPVnRUAAAAASUVORK5CYII=" 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. DoctrineMigrationsBundle

    数据库迁移特征是数据库抽象层的扩展,允许你用编程的方式,安全.方便.标准化实现数据库结构的更新. 安装 首先使用composer安装 $ composer require doctrine/doctr ...

  2. 关闭并且禁用ECSHOP缓存

    ECSHOP的缓存机制从一定程度上可以减少ECSHOP反复读取数据库的几率,从而一定程度上降低服务器负担,提高访问速度.但是启用缓存机制,对一些新手站长也有不利的地方.我就遇到很多新手站长经常问,我明 ...

  3. Python核心编程(第七章)--映像和集合类型

    字典:它是一个容器类型,能存储任意个数的Python对象,也包括其他容器类型,Python的字典是作为可变的哈希表实现的 映像类型中的数据是无序排列的   可以用工厂方法dict()来创建字典,也可以 ...

  4. project euler 14 collatz

    def collatz(num,i): i =i + 1 if num%2 == 0: return collatz(num//2,i) elif num == 1: return i else: r ...

  5. Sherlock and Squares

    //Link https://www.hackerrank.com/challenges/sherlock-and-squares from math import sqrt # 用什么,引什么,减少 ...

  6. python导入matplotlib模块出错

    我的系统是linux mint.用新立得软件包安装了numpy和matplotlib.在导入matplotlib.pyplot时出错.说是没有python3-tk包. 于是就在shell中装了一下. ...

  7. 自定义 cell 自适应高度

    #import "CommodityCell.h" #import "UIImageView+WebCache.h" @implementation Commo ...

  8. IOS APP配置.plist汇总（转自coolweather ）

    IOS APP配置.plist汇总(转自coolweather ) 此文转自http://www.cocoachina.com/bbs/read.php?tid=89684&page=1 作者 ...

  9. 开心菜鸟学习系列笔记－－－－－Javascript（1）

    js 一些常见的使用方法        // target : 不管是否出现冒泡,他都是代表最开始引发事件的对象   // this   : 是指当前函数.  //ie 事件对象   : window ...

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

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