<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. Jedis连接池使用

    构建redis连接池,返还到连接池 private static JedisPool jedisPool = null; private static Jedis jedis; static { je ...

  2. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  3. JAVA的节点流和处理流

    节点流:可以从或向一个特定的地方(节点)读写数据.如FileReader. 处理流:是对一个已存在的流的连接和封装,通过所封装的流的功能调用实现数据读写.如BufferedReader.处理流的构造方 ...

  4. Python—课时ONE

    说实话第一次接触Python还是在我刚上班的时候,听说很多人这个开发语言很吊,应用的领域很多.but这些东西还不能够吸引我,真正的原因是因为这个开发语言很是简单,比较适合我这种2B学的.但是越往后越觉 ...

  5. Struts2中的JSON问题——后台返回JSON字符串到前台

    最近做一个项目遇到一个比较棘手的问题,项目后台采用struts2+Hibernate3+Spring3,前台采用ExtJs4.笔者目前仍是一名大二学生吗,后台框架完全是毫无任何基础,从零学,现学现用. ...

  6. java虚拟机内存分配

  7. 前端工程之node基础

    Node.exe是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Nodejs定义了一个构造函数 Module,所有的模块(Node中一个文件即一个模块)都是 Module 的 ...

  8. Java基础知识二次学习--第七章 容器

    第七章 容器   时间:2017年4月27日15:08:30 章节:07章01节~07章04节 视频长度:20:21 +12:38 +3:55 +2:57 内容:容器API 心得: Java API ...

  9. CentOS7 防火墙规则 (firewalld)

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disab ...

  10. 使用adb报错；error: unknown host service

    用adb往虚拟机Genymotion上安装apk时报错 报这个错误是因为主机端口5037被占用 接下来就要查看5037被哪个应用程序占用,然后结束该程序,才能使用adb 在cmd输入命令netstat ...