<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. 在Core环境下用WebRequest连接上远程的web Api 实现数据的简单CRUD（续）

    这篇博客是上篇博客的续写,上篇博客用的是HttpClient取远程数据,用WebRequest提交,更新,删除数据.上篇本来想全文都用httpClient,可是当时无论如何也实现不了数据的提交,于是换 ...

  2. 关于Yii框架的基础知识

    第一次写博文,也不知道怎么写,不太熟悉,带小伙伴学习一样我日常使用的Yii框架. PHP中的开发框架有很多,比如:ThinkPHP.Yii.CI.Laravel.Phalcon等.现在流行度最高的是L ...

  3. jdbc(2)

    create table account ( id int primary key auto_increment, name varchar(20), money double);insert int ...

  4. 模板方法模式(Tempalte Method Pattern)

    模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有 ...

  5. UGUI ScrollRect 性能优化

    测试环境 操作系统:Windows8.1 开发工具:Unity5.5.2 1.问题描述,在实际开发过程中经常会使用ScrollRect实现滚动列表,当初次加载数据比较多的情形时,Unity3D会出现比 ...

  6. bash shell中测试命令

    bash shell中测试命令 test命令提供了if-than语句中测试不同条件的途径.如果test命令中列出的条件成立,test命令就会退出并返回退出状态吗0 .这样if-than语句就与其他编程 ...

  7. php如何应对秒杀抢购高并发思路

    我们常用QPS(Query Per Second,每秒处理请求数)来衡量一个web应用的吞吐率,解决每秒数万次的高并发场景,这个指标非常关键. 举个栗子:假设一个业务请求平均为100ms,同时系统内有 ...

  8. （数字IC）低功耗设计入门（一）

    低功耗设计这个专题整理了好久,有一个月了,有图有证据: 然而最近一直有些烦心事.郁闷事,拖延了一下,虽然现在还是有点烦,但是还是先发表了吧.下面我们就来聊聊低功耗设计吧,由于文章比较长,因此我就不一次 ...

  9. linux centos7.0安装subversion

    安装环境以及软件版本如下: subversion使用1.8.17版本,CentOS7.0(64位) 安装svn共需要使用如下软件,apr-1.5.2.tar.gz.apr-util-1.5.4.tar ...

  10. 挂载mount

    mount 1 挂载mount 基本概念 挂载:将额外文件系统与根文件系统现存的目录建立起关联关系,进而使得此目录做为其它文件访问入库的行为 卸载:为解除关联关系的过程 注意:挂载点下原有的文件在挂载 ...