<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. 再议Unity优化

    0x00 前言 在很长一段时间里,Unity项目的开发者的优化指南上基本都会有一条关于使用GetCompnent方法获取组件的条目(例如14年我的这篇博客<深入浅出聊Unity3D项目优化:从D ...

  2. matlab笔记（1） 元胞结构cell2mat和num2cell

    摘自于:https://zhidao.baidu.com/question/1987862234171281467.html https://www.zybang.com/question/dcb09 ...

  3. SpringMVC构建Restful。

    因为spring是依赖jackson来生成json,需要添加jar包. pom.xml文件添加依赖. <dependency> <groupId>org.codehaus.ja ...

  4. 腾讯IVWEB团队：前端 fetch 通信

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:villainthr 文章摘自: 前端小吉米 随着前端异步的发展, XHR 这种耦合方式的书写不利于前端 ...

  5. jsp自定义函数库

      步骤如下: 1.创建一个函数库类,里面的方法就是标签函数库要调用的方法(必须是静态方法) package com.mdd.tag; public class JiSuan {     //两个数相 ...

  6. Jenkins 发布后自动创建git tag

    为了便于项目中对发布的版本进行回滚,所以我们每次发布完成以后自动创建git tag. 1,创建一个Jenkins任务,命名成为push_tag_demo: 2,配置<源码管理>,这里配置比 ...

  7. java 操作 redis

    1.Java 使用 Redis 只需要下载一个jar包即可 地址:http://maven.outofmemory.cn/redis.clients/jedis/2.5.2/ 工程

  8. 开涛spring3(4.4) - 资源 之 4.4 Resource通配符路径

    4.4.1  使用路径通配符加载Resource 前面介绍的资源路径都是非常简单的一个路径匹配一个资源,Spring还提供了一种更强大的Ant模式通配符匹配,从能一个路径匹配一批资源. Ant路径通配 ...

  9. 几个常用的linux快捷键和shell知识

    1)   !$    !$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样:     $mkdir mydir     $mv mydir yourdir     $cd y ...

  10. iOS安全攻防之结构体保护使用

    Objective-C 代码很容易被 hook,因此需要对一些重要的业务逻辑进行保护,可以改用结构体的形式,把函数名隐藏在结构体里,以函数指针成员的形式存储.这样编译后只留了下地址,去掉了名字和参数表 ...