纯CSS,label+input+section实现tab功能

来源：互联网发布：妖姬知乎编辑：程序博客网时间：2024/04/30 00:19

非常简易实用的代码，并没有华丽丽的效果，也没有华丽丽的代码。

一切为了实用！

<style>html,body {height: 100%;}body {font: 14px/1 'Open Sans', sans-serif;color: #555;background: #eee;}h1 {padding: 50px 0;font-weight: 400;text-align: center;}p {margin: 0 0 20px;line-height: 1.5;}main {min-width: 320px;max-width: 800px;padding: 50px;margin: 0 auto;background: #fff;}section {display: none;padding: 20px 0 0;border-top: 1px solid #ddd;}input {display: none;}label {display: inline-block;margin: 0 0 -1px;padding: 15px 25px;font-weight: 600;text-align: center;color: #bbb;border: 1px solid transparent;}label:before {font-family: fontawesome;font-weight: normal;margin-right: 10px;}label[for*='1']:before {content: '\f1cb';}label[for*='2']:before {content: '\f17d';}label[for*='3']:before {content: '\f16b';}label[for*='4']:before {content: '\f1a9';}label:hover {color: #888;cursor: pointer;}input:checked + label {color: #555;border: 1px solid #ddd;border-top: 2px solid orange;border-bottom: 1px solid #fff;}#tab1:checked ~ #content1,#tab2:checked ~ #content2,#tab3:checked ~ #content3,#tab4:checked ~ #content4 {display: block;}@media screen and (max-width: 650px) {label {font-size: 0;}label:before {margin: 0;font-size: 18px;}}@media screen and (max-width: 400px) {label {padding: 15px;}}</style><h1>Tommy bad bad</h1><main><input id="tab1" type="radio" name="tabs" checked><label for="tab1">1</label><input id="tab2" type="radio" name="tabs"><label for="tab2">2</label><input id="tab3" type="radio" name="tabs"><label for="tab3">3</label><input id="tab4" type="radio" name="tabs"><label for="tab4">4</label><section id="content1"><p>1</p><p>1</p></section><section id="content2"><p>2</p><p>2</p></section><section id="content3"><p>3</p><p>3</p></section><section id="content4"><p>4</p><p>4</p></section></main>

0 0