<body> <main> <h2>CSS Tabs</h2> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">tab1</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">tab2</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">tab3</label> <input id="tab4" type="radio" name="tabs"> <label for="tab4">tab4</label> <section id="content1"> <h3>tab1</h3> <p>content1</p> </section> <section id="content2"> <h3>tab2</h3> <p>content2</p> </section> <section id="content3"> <h3>tab3</h3> <p>content3</p> </section> <section id="content4"> <h3>tab4</h3> <p>content4</p> </section> </main> </body>
<style> body { background: #FFEFD3; font-family: "Open Sans", "Arial"; } main { background: #FFF; width: 500px; margin: 50px auto; padding: 10px 30px 80px; box-shadow: 0 3px 5px rgba(0,0,0,0.2); } p { font-size: 13px; } input, section { clear: both; padding-top: 10px; display: none; } label { font-weight: bold; font-size: 14px; display: block; float: left; padding: 10px 30px; border-top: 2px solid transparent; border-right: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 1px solid #DDD; } label:hover { cursor: pointer; text-decoration: underline; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } input:checked + label { border-top-color: #FFB03D; border-right-color: #DDD; border-left-color: #DDD; border-bottom-color: transparent; text-decoration: none; } </style>
核心：
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; }
- CSS3 element1 ~ element2 选择器：
element1 ~ element2 选择器 element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
- CSS element + element 选择器：
element + element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。
- (补)
HTML <label> 标签，为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
提示: "for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。