<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. hdu3336 kmp

    It is well known that AekdyCoin is good at string problems as well as number theory problems. When g ...

  2. OC中Foundation框架之NSString、NSMutableString

    创建方式 )直接赋值 NSString *str =@"abc"; )创建对象 NSString *str2 = [[NSString alloc]init]; str2 =@&q ...

  3. MongoDB基础教程系列--未完待续

    最近对 MongoDB 产生兴趣,在网上找的大部分都是 2.X 版本,由于 2.X 与 3.X 差别还是很大的,所以自己参考官网,写了本系列.MongoDB 的知识还是很多的,本系列会持续更新,本文作 ...

  4. Oracle与mysql的字段类型整理

    Oralce的字段类型整理如下: Mysql的字段类型整理如下: 最后面一栏是对应JAVA的基本类型.希望对初学者有用,初学者在学习JAVA的时候,不知道怎么把JAVA的对象指向到ORALCE或者MY ...

  5. 【WPF】获取电磁笔的压感

    WPF 不仅支持触控,也支持笔的输入,比如现在比较高大上的电磁笔.便宜的板子一般不配备电磁笔,而是配电容笔,虽然也号称XXX级压感,但是效果自然不可与电磁笔相比. UIElement 类规范了UI元素 ...

  6. MyEclipse2016添加外部的maven插件

    1.在maven官网下载最新的maven安装包,下载地址:http://maven.apache.org/download.cgi: 2.目前maven的版本是3.5.0,我们下载apache-mav ...

  7. Shell脚本编写

    1.什么是Shell脚本 Shell脚本是利用 shell 的功能所写的一个程序 program,这个程序是使用纯文本文件,将一些 shell 的语法与指令(含外部指令)写在里面, 搭配正则表达式.管 ...

  8. JS执行效率与性能提升方案

    如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr.如果要连接多个字符串,应该少使用+=,如 s+=a;s+=b;s+=c;应该写成s+=a + b + ...

  9. JAVA中断机制详解

    Java提供了中断机制,可以使用它来结束一个线程.这种机制要求线程检查它是否被中断了,然后决定是不是响应这个中断请求.线程允许忽略中断请求并继续执行.Java的中断是一种协作机制.也就是说调用线程对象 ...

  10. gitlab 添加SSH Key

    1.登录http://domain/users/sign_in 2.选择"Profile Settings",进入"Profile Settings"设置页面 ...