点击文字就能选中元素,这个可以想到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>