选项卡怎么实现切换效果
生活随笔
收集整理的這篇文章主要介紹了
选项卡怎么实现切换效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
點(diǎn)擊文字就能選中元素，這個可以想到input和label的結(jié)合
<input type="radio">給相同的name只能選擇一個，設(shè)id值，<label for="id值">進(jìn)行綁定那么就能實(shí)現(xiàn)點(diǎn)擊label里的文字可以選中單選按鈕，但是這里是一個框，那么怎么實(shí)現(xiàn)點(diǎn)擊label出現(xiàn)框呢
可以在input后面設(shè)定一個兄弟元素，選中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;/*為了實(shí)現(xiàn)點(diǎn)擊會有向上移動的效果*/margin-top: 10px;/*為了實(shí)現(xiàn)點(diǎn)擊會有向上移動的效果*/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成最期待新機(jī)</li><li>[實(shí)用]魅族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成最期待新機(jī)</li><li>[熱議]GalaxyS8成最期待新機(jī)</li><li>[熱議]GalaxyS8成最期待新機(jī)</li><li>[熱議]GalaxyS8成最期待新機(jī)</li></ul></li></ul> </body> </html>總結(jié)
以上是生活随笔為你收集整理的选项卡怎么实现切换效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20220528【聊聊假芯片】贪便宜往往
- 下一篇： STM32F103+RTT从零开始（三）