选项卡怎么实现切换效果

点击文字就能选中元素，这个可以想到input和label的结合

<input type="radio">给相同的name只能选择一个，设id值，<label for="id值">进行绑定那么就能实现点击label里的文字可以选中单选按钮，但是这里是一个框，那么怎么实现点击label出现框呢

可以在input后面设定一个兄弟元素，选中input后会改变这个兄弟元素，写法input:checked~div

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
a{text-decoration: none;}
i{font-style: normal;}
.clearfix:after{
    display: block;
    clear:both;
    content:"";
}
.nav{
    position: relative;
    width: 300px;
    margin-top: 100px;
    margin-left: 500px;
}
.nav > li{
    float: left;
}
.nav label{
    display: block;
    width: 100px;
    height: 50px;
    background-color: pink;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
     transition: .5s;
}
input{
    display: none;
}
input:checked ~ label{
    padding-bottom: 10px;
    margin-top: -10px;
    background-color: green;
}
input:checked ~ .list{
    display: block;
}
.list{
    position: absolute;
    display: none;
    top:50px;
    left: -30px;
    width: 400px;
    background-color: green;
}
.list > li{
    height: 30px;
    padding-left: 30px;/*为了实现点击会有向上移动的效果*/
    margin-top: 10px;/*为了实现点击会有向上移动的效果*/
    font-size: 16px;
    text-align: left;
    line-height: 30px;
    color: #fff;
}
</style>
</head>
<body>
    <ul class="nav clearfix">
        <li>
            <input type="radio" id="box1" name="list1" checked>
            <label for="box1">头条</label>
            <ul class="list">
                <li>[热议]GalaxyS8成最期待新机</li>
                <li>[实用]魅族5s30分钟充电56%</li>
                <li>[划算]爆款9.9元秒杀还包邮</li>
                <li>[时尚]摩拜单车真的不如ofo?</li>
            </ul>
        </li>
        <li>
                <input type="radio" id="box2" name="list1">
                <label for="box2">公告</label>
                <ul class="list">
                <li>[时尚]摩拜单车真的不如ofo?</li>
                <li>[时尚]摩拜单车真的不如ofo?</li>
                <li>[时尚]摩拜单车真的不如ofo?</li>
                <li>[时尚]摩拜单车真的不如ofo?</li>
            </ul>
        </li>
        <li>
            <input type="radio" id="box3" name="list1">
            <label for="box3">足球</label>
            <ul class="list">
            <li>[热议]GalaxyS8成最期待新机</li>
            <li>[热议]GalaxyS8成最期待新机</li>
            <li>[热议]GalaxyS8成最期待新机</li>
            <li>[热议]GalaxyS8成最期待新机</li>
            </ul>
        </li>
    </ul>
</body>
</html>

选项卡怎么实现切换效果

猜你喜欢