<style>

            *{

                margin: ;

                padding: ;

                text-decoration: none;

                list-style: none;

                outline:none;

            }

            .box{

                width: 600px;

                overflow: hidden;

                border:1px solid #eee;

                margin: 50px auto;

            }

            .nav{

                width: 600px;

            }

            .nav_list{

                float:left;

                width:33.333%;

                box-sizing: border-box;

            }

            .nav_title{

                display: block;

                line-height: 40px;

                text-align: center;

                background: white;

                cursor: pointer;

                border-left: 1px solid #eee;

            }

            .nav_txt{

                position:relative;

                width: 600px;

                background: white;

                padding: 20px;

            }

            .m1{

                margin-left: -%;

            }

            .m2{

                margin-left: -%;

            }

            .nav_radio{

                display: none;

            }

            .nav_radio:checked + .nav_title{

                background: #f5f5f5;

            }

            .nav_radio:checked ~ .nav_txt{

                z-index: ;

            }

        </style>
<body>

        <div class="box">

            <ul class="nav">

                <li class="nav_list">

                    <input type="radio" checked="checked" name="nav" id="nan" class="nav_radio"/>

                    <label for="nan" class="nav_title">男士</label>

                    <p class="nav_txt">男士页面</p>

                </li>

                <li class="nav_list">

                    <input type="radio" name="nav" id="nv" class="nav_radio"/>

                    <label for="nv" class="nav_title">女士</label>

                    <p class="nav_txt m1">女士页面</p>

                </li>

                <li class="nav_list">

                    <input type="radio" name="nav" id="child" class="nav_radio"/>

                    <label for="child" class="nav_title">儿童</label>

                    <p class="nav_txt m2">儿童页面</p>

                </li>

            </ul>

        </div>

    </body>

大致思路是利用 radio和label ，

这种挺简单的.

css实现选项卡的更多相关文章

  1. css Tab选项卡

    css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...

  2. css Tab选项卡1

    利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a   ...

  3. js进阶 11-21 纯css实现选项卡

    js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...

  4. JS+CSS实现选项卡功能

    [小小一记] 首先我们写一个选项卡的结构出来,包括tab和content: 首先是tab: <ul class="ttitle-box-tabs" id="tabs ...

  5. css中选项卡的实现

    制作一个简单的选项卡,以供初学者参考:关于css书写的比较粗糙.请见谅 <!DOCTYPE html><html lang="en"><head> ...

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

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

  7. 用js和css实现选项卡效果+jq(2019-10-09)

    1效果图: 2代码: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. css Tab选项卡2

    注意上述 红色方框   这个是锚点的变相  以及overflow:hiden结合, 利用  锚点对应 id  ,  也可以实现. 兼容ie6+  适合手机tab 简单   不需要脚本 其实还可以利用 ...

  9. html+css实现选项卡功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. ST-2

    1.第一个程序没有覆盖到下表为0的数.第二个程序找到的是x中第一个等于0的数的下标. 2.对于第一个程序:x = [2,3,5], y = 3 对于第二个程序:X = [2,0,6] 3.对于两个程序 ...

  2. 记录——时间轮定时器（lua 实现）

    很长一段时间里,我错误的认识了定时器.无意中,我发现了“时间轮”这个名词,让我对定时器有了新的看法. 我错误的认为,定时器只需要一个 tick 队列,按指定的时间周期遍历队列,检查 tick 倒计时满 ...

  3. 关于关系型数据库（MySQL）的一些概念

    主键:关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录, 该属性组就可以成为一个主键,主键不允许为空,主键只能有同一个 外键:如果一个表的某个属性是另一个表的主 ...

  4. QBC查询

    1.基本语法 session.beginTransaction(); Criteria criteria = session.createCriteria(Person.class); SimpleE ...

  5. 写给Android App开发人员看的Android底层知识（3）

    (七)App启动流程第2篇 书接上文,App启动一共有七个阶段,上篇文章篇幅所限,我们只看了第一阶段,接下来讲剩余的六个阶段,仍然是拿斗鱼App举例子. 简单回顾一下第一阶段的流程,就是Launche ...

  6. VHDL乘除法及转换

    首先鄙视一下这个不智能的语言 1.要进行乘法与除法,数据类型必须是signed 2.两个16位的数相乘,结果必须是32位的 3.乘以2的n次幂的数可以直接乘,之后截位也比较方便,(其实直接移位就可以) ...

  7. 使用ThreadLocal实现的读写分离在迁移后的偶发错误

    最近莫名的会有错误日志,说有写操作因为走了读库而报了read only的异常,由于并没有造成应用使用的问题,开始我以为哪的配置错误就没当回事让程序员自己去查了,然而... 背景:之前的博客里提到过,读 ...

  8. 一个gif远程crash你的微信！

    测试了一下iPhone6,iPhone7不同版本的 iOS上,收到某个天线宝宝的gif,最新版本的微信都会挂. demo视频:演示视频 通过 crash log可以看到微信最新的6.5.8版本在打开 ...

  9. Unity游戏程序员面试题及解答

    典型的一些如手写排序算法.一些基本数学问题,在此就不列举了.以下整理出一些代表性的.有参考价值的题,真实面试题,附有本人的解答,欢迎讨论. 题1.指出下列哪些属于值类型? int System.Obj ...

  10. React，关于redux的一点小见解

    最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...