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. NPAPI火狐插件VS2013开发示例

    NPAPI火狐插件VS2013开发示例 下面是我根据网上开发示例自己做的一个demo,并提供代码下载. 开发环境 Windows 8.1 x64 Visual studio 2013 准备工作 首先需 ...

  2. Linux下编译第三方库的问题

    因为各个Linux发行版之间的差异还是挺大的,有一些预安装在系统上的基本库是不一样的(不仅仅是版本,有一些是有和无的区别). 那么问题来了: 编译第三方库./configure的时候一般我们不会定制那 ...

  3. 转：MVC分页

    原文地址:http://www.cnblogs.com/iamlilinfeng/p/4075292.html 分页总是搞得我很烦,也是因为刚接触,貌似有好多插件,之前在用一个,可是后来发现一翻页原来 ...

  4. UVa12096.The SetStack Computer

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  5. chrome无法使用非官方商店扩展解决办法

        自己开发的工具性插件不想放在官方商店(当然也有可能是工作相关的工具不能放在官方商店),由于新版本的chrome不允许非官方商店的插件进行安装使用,所以出现一个头疼的问题:每次开启chrome都 ...

  6. Java虚拟机体系结构深入研究总结

    工作以来,代码越写越多,程序也越来越臃肿,效率越来越低,对于我这样一个追求完美的程序员来说,这是绝对不被允许的,于是除了不断优化程序结构外,内存优化和性能调优就成了我惯用的“伎俩”. 要对Java程序 ...

  7. Linux系统启动流程（2）

    内核设计风格: RedHat, SUSE核心:动态加载 内核模块内核:/lib/modules/“内核版本号命令的目录”/vmlinuz-2.6.32/lib/modules/2.6.32/ RedH ...

  8. 04747_Java语言程序设计（一）_第9章_输入和输出流

    例9.1一个文件复制应用程序,将某个文件的内容全部复制到另一个文件. import java.io.*; public class Example9_1 { public static void ma ...

  9. poj 3616 Milking Time（dp）

    Description Bessie ≤ N ≤ ,,) hours (conveniently labeled ..N-) so that she produces as much milk as ...

  10. (转)Eclipse 远程调试 WebSphere Application Server (WAS)

    目前我们项目中使用的应用服务器多是WebSphere,一直苦于无法进行调试,今天在网上看到一篇,原文是 http://www.cnblogs.com/newstar/archive/2010/04/1 ...