css实现选项卡

复制代码

<style> *{ margin: 0; padding: 0; 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: -100%; } .m2{ margin-left: -200%; } .nav_radio{ display: none; } .nav_radio:checked + .nav_title{ background: #f5f5f5; } .nav_radio:checked ~ .nav_txt{ z-index: 1; } </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 ,

这种挺简单的.

posted @   User猿  阅读(417)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示