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. Centos下配置Java运行环境

    今天搞了个阿里云,Centos主机 先搞了Tomcat 然后配置Java环境 1.修改文件可执行 chmod 777 (u+x) 文件名 2.配置环境变量 vi /etc/profile 加入如下代码 ...

  2. JQuery轻量级网页编辑器 选中即可编辑

    目前流行的可视化网页编辑器非常多,像ckeditor.kindeditor.tinyeditor等,虽然功能都非常强大,但是体积都比 较庞大,使用起来也不是很方便.今天我们分享一款基于jQuery的轻 ...

  3. POJ-2533最长上升子序列(DP+二分）（优化版）

    Longest Ordered Subsequence Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 41944   Acc ...

  4. 【HDU1514】Stars（树状数组）

    绝对大坑.千万记住树状数组0好下标位置是虚拟节点.详见大白书P195.其实肉眼看也能得出,在add(有的也叫update)的点修改操作中如果传入0就会死循环.最后TLE.所以下标+1解决问题.上代码! ...

  5. c++ windows下declspec

    一.declspec #ifdef STATIC_LIBS #define DLL_API static #else #define DLL_API __declspec (dllexport) #e ...

  6. Java配置文件Properties的读取、写入与更新操作

    /** * 实现对Java配置文件Properties的读取.写入与更新操作 */ package test; import java.io.BufferedInputStream; import j ...

  7. python小记列表排序

    a=[('b',4),('a',7),('c',2)] 正向排序a.sort() 反向排序:a.sort(reverse=True) 对第二关键字排序 a.sort(lambda x,y:cmp(x[ ...

  8. 要理解javascript中间apply和call

    apply和call它是javascript一个非常重要的方法,.虽然与程序平时很少接触,但JS到处都在使用这个框架2方法. 2个方法是在Function.prototype中.也就是说每一个JS函数 ...

  9. ZOJ 3329 One Person Game 带环的概率DP

    每次都和e[0]有关系 通过方程消去环 dp[i] = sigma(dp[i+k]*p)+dp[0]*p+1 dp[i] = a[i]*dp[0]+b[i] dp[i] = sigma(p*(a[i+ ...

  10. ACdream 1083 有向无环图dp

    题目链接:点击打开链接 人民城管爱人民 Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 128000/64000 KB (Java/Othe ...