css实现页面标签的跳转
生活随笔
收集整理的這篇文章主要介紹了
css实现页面标签的跳转
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
純css實現(xiàn)頁面標(biāo)簽的跳轉(zhuǎn)
html代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>tab</title><style type="text/css">#main {width: 510px;margin: 100px auto 0;border: 1px solid #999;background-color: lightgreen;}label {display: inline-block;cursor: pointer;height: 52px;line-height: 52px;font-size: 16px;width: 70px;text-align: center;margin: 0 47px;}.radio {margin: 0;display: none;}.radio:nth-of-type(1):checked~label:nth-of-type(1) {/*當(dāng)?shù)谝粋€radio是checked的input時選中下面的標(biāo)簽1增加樣式*/color: #fff;border-bottom: 2px solid #fff;font-weight: bold;}.radio:nth-of-type(1):checked~.tab:nth-of-type(1) {/*當(dāng)?shù)谝粋€radio是checked的input時選中下面的內(nèi)容1增加樣式*/display: block;}.radio:nth-of-type(2):checked~label:nth-of-type(2) {color: #fff;border-bottom: 2px solid #fff;font-weight: bold;}.radio:nth-of-type(2):checked~.tab:nth-of-type(2) {display: block;}.radio:nth-of-type(3):checked~label:nth-of-type(3) {color: #fff;border-bottom: 2px solid #fff;font-weight: bold;}.radio:nth-of-type(3):checked~.tab:nth-of-type(3) {display: block;}.tab {display: none;width: 100%;height: 240px;font-size: 24px;text-align: center;line-height: 240px;border-top: 1px solid #d8d8d8;background-color: #fff;}</style> </head><body><div id="main"><input checked="checked" id="radio" class="radio" type="radio" name="radio"><!--單選框radio--><input id="radio1" class="radio" type="radio" name="radio"><input id="radio2" class="radio" type="radio" name="radio"><label for="radio">頁簽1</label><！--for屬性綁定上面的input標(biāo)簽--><label for="radio1">頁簽2</label><label for="radio2">頁簽3</label><div class="tab">內(nèi)容1</div><div class="tab">內(nèi)容2</div><div class="tab">內(nèi)容3</div></div> </body></html>
?
總結(jié)
以上是生活随笔為你收集整理的css实现页面标签的跳转的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java xpath 解析xml_使用X
- 下一篇： ssdp协议_Cotopaxi：使用指定