首页 > 代码库 > css实现选项卡

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 ,

这种挺简单的.

css实现选项卡