ホームページ > 記事 > ウェブフロントエンド > タブ切り替え効果を実現する純粋な CSS_html/css_WEB-ITnose
タブ切り替え効果を実現する純粋な CSS_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:09:111807ブラウズ
主に CSS3 の :checked セレクターを使用します。
コード構造は js を使用する場合と似ていますが、さらにいくつかのラジオが追加されます。
パフォーマンスの点で js と css のどちらが速いかはわかりません。
codepen アドレス: http://codepen.io/YuanWing/pen/RPqvad
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>CSS3 TAB</title> <style> body { font-family: 'Microsoft YaHei'; font-size: 14px; background-color: #f5f4f7; margin: 0; color: #252525; } a { text-decoration: none; } h3, h4 { margin: 0; font-weight: 400; font-size: inherit; } ul { padding-left: 0; list-style: none; margin: 0; } p { margin-top: 0; margin-bottom: 0; } .Jhds { position: relative; } .Jhds .radio { opacity: 0; position: absolute; } .Jhds .radio:nth-of-type(1):checked ~ .tab-title label:nth-of-type(1) { color: #fff; background-color: #498fee; } .Jhds .radio:nth-of-type(2):checked ~ .tab-title label:nth-of-type(2) { color: #fff; background-color: #498fee; } .Jhds .radio:nth-of-type(3):checked ~ .tab-title label:nth-of-type(3) { color: #fff; background-color: #498fee; } .Jhds .radio:nth-of-type(1):checked ~ .tab-outer .tab-inner:nth-of-type(1) { display: block; } .Jhds .radio:nth-of-type(2):checked ~ .tab-outer .tab-inner:nth-of-type(2) { display: block; } .Jhds .radio:nth-of-type(3):checked ~ .tab-outer .tab-inner:nth-of-type(3) { display: block; } .Jhds .tab-title { font-size: 0; padding: 15px; text-align: center; } .Jhds .tab-title label{ display: inline-block; color: #498fee; text-align: center; background-color: #fff; border: 1px solid #498fee; font-size: 14px; width: 30%; padding: 5px 0; } .Jhds .tab-title label:first-child { border-right: 0 none; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .Jhds .tab-title label:last-child { border-left: 0 none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .Jhds .tab-outer .tab-inner { display: none; } .Jhds .tab-inner li{ position: relative; background-color: #fff; } .Jhds .title:after, .Jhds .tab-inner li:before, .Jhds .tab-inner li:last-child:after{ position: absolute; left: 0; content: ''; width: 100%; height: 1px; font-size: 0; background-color: #d9d9d9; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .Jhds .tab-inner li:before { top: 0; } .Jhds .title:after, .Jhds .tab-inner li:last-child:after { bottom: 0; } .Jhds .title { padding: 10px; position: relative; overflow: hidden; } .Jhds .title .Jhds-num { color: #498fee; white-space: nowrap; } .Jhds .title .time { float: right; display: inline-block; } .Jhds .list { padding: 10px 60px 10px 10px; position: relative; color: #252525; display: block; } .Jhds .price { color: #f90; margin-top: 5px; } .Jhds .num { position: absolute; right: 30px; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; } .arrow { position: absolute; right: 10px; top: 50%; margin-top: -6px; width: 10px; height: 10px; border-left: 1px solid #cfcfcf; border-top: 1px solid #cfcfcf; -webkit-transform: rotate(135deg); transform: rotate(135deg); } @media screen and (max-width:370px) { .Jhds .title .time { float: none; } } </style></head><body> <div class="Jhds"> <input checked class="radio" type="radio" name="Jhds" id="Jhds1"> <input class="radio" type="radio" name="Jhds" id="Jhds2"> <input class="radio" type="radio" name="Jhds" id="Jhds3"> <div class="tab-title"> <label for="Jhds1">待付款</label> <label for="Jhds2">待签收</label> <label for="Jhds3">已完成</label> </div> <div class="tab-outer"> <ul class="tab-inner"> <li> <h3 class="title"> <span class="Jhds-num">进货单号：jkdjh2015072623125699</span> <span class="time">今天 23：12 进货</span> </h3> <a class="list" href="###"> <h4>60°飞天茅台最好的茅台浓香1000ml</h4> <p class="price">待确认：¥129.00</p> <span class="num">X6</span> <span class="arrow"></span> </a> </li> </ul> <ul class="tab-inner"> <li> <h3 class="title"> <span class="Jhds-num">进货单号：jkdjh2015072623965199</span> <span class="time">今天 23：12 进货</span> </h3> <a class="list" href="###"> <h4>50°西凤·御宴酒（精装版）500ml</h4> <p class="price">已发货：¥39.00</p> <span class="num">X1</span> <span class="arrow"></span> </a> </li> </ul> <ul class="tab-inner"> <li> <h3 class="title"> <span class="Jhds-num">进货单号：jkdjh2015072623126899</span> <span class="time">今天 23：12 进货</span> </h3> <a class="list" href="###"> <h4>法国富乐男爵干红葡萄酒豪华大礼包</h4> <p class="price">已签收：¥369.00</p> <span class="num">X6</span> <span class="arrow"></span> </a> </li> </ul> </div> </div></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。