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

css实现选项卡

2024-10-04 16:46:02   216人阅读


<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实现选项卡


联系
我们