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. 在树莓派上安装leanote

    作者:冥王星 "noright0@163.com" 前言 宿舍有个树莓派2B,连接到电视机,安装OSMC系统,USB接口连接移动硬盘一块,平时用来BT下载和看电影.美剧. OSMC ...

  2. Linux_Shell type

    Recommendation is to use the bash shell, because he is strong enough, and absorbed the useful proper ...

  3. EF查询

    public ActionResult AllSettings(DataSourceRequest command, Framework.Kendoui.Filter filter = null, S ...

  4. CloudStack添加新的API注意事项

    1.***Cmd上面的@APICommand里的responseObject关联对于的Response: 2.在tomcatconf/command.properties.in添加新API的权限: 3 ...

  5. 开心菜鸟学习系列学习笔记－－－－－－－－－－－－nodejs util公共函数

    global  在最外层定义的变量:    全局对象的属性:    隐式定义的变量(未定义直接赋值的变量).  一.process   process 是一个全局变量,即 global 对象的属性 ...

  6. CART剪枝

    与上篇文章中提到的ID3算法和C4.5算法类似,CART算法也是一种决策树分类算法.CART分类回归树算法的本质也是对数据进行分类的,最终数据的表现形式也是以树形的模式展现的,CART与ID3,C4. ...

  7. Chrome小技巧：如何下载离线版安装文件

    每当chrome有更新之后,都有不少用户想要下载离线版的安装文件,但苦于找不到下载地址而发愁,其实这个问题很简单,下面我来分享一下方法(仅针对Windows操作系统): 对于稳定版(正式版)Chrom ...

  8. 转：更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法

    拜GFW所赐,对于初学者的我来说,总会出现一些莫名其妙的问题 首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本 ...

  9. Palindrome Subarrays

    给定输入字符串,要求判断任意子字符串是否对称. 基本思路就是DP 写出DP表达式为 dp[i][j] = dp[i + 1][j - 1] && (s[i] == s[j]) dp[i ...

  10. 关于qt学习的一点小记录(2)

    嗯...这次接了个单 要求图形界面,刚好可以巩固并学习下QT.毫不犹豫的就接了 下面记录下出现的问题: 1. QWidget和QDialog QDialog下的槽函数有accept()与reject( ...