重點筆記
- label 不包住 input
- label 的 for 和 input 的 id 必需相同
- 所有 input 需加同一個 name 屬性，這樣在切換時才會只有一個被選中
- 使用 css ~ 選取器來選取後方任何符合的元素，以顯示選取中的 tab 內容
- 使用 position: absolute 及 opacity 來隱藏 input
建立html
<div class="panel-group">
<input type="radio" name="panel-radio" id="radio1" class="radio-panel">
<input type="radio" name="panel-radio" id="radio2" class="radio-panel">
<input type="radio" name="panel-radio" id="radio3" class="radio-panel" checked>
<input type="radio" name="panel-radio" id="radio4" class="radio-panel">
<input type="radio" name="panel-radio" id="radio5" class="radio-panel">
<div class="tab-group">
<label for="radio1">tab1</label>
<label for="radio2">tab2</label>
<label for="radio3">tab3</label>
<label for="radio4">tab4</label>
<label for="radio5">tab5</label>
</div>
<div class="content-group">
<div class="content" id="content1">content1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo animi ullam assumenda quasi excepturi temporibus odit, eius distinctio dolores, ipsam at architecto porro cupiditate maiores praesentium vel voluptatum! Officiis, molestiae!</div>
<div class="content" id="content2">content2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, reprehenderit possimus odio dolores officiis repudiandae eum eligendi quod deleniti et itaque, maxime nobis accusamus aspernatur. Voluptatibus quae, culpa reiciendis.</div>
<div class="content" id="content3">content3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem mollitia esse porro provident doloremque dolorem quis culpa vel natus explicabo? Eligendi illum unde, delectus, ipsa aliquid atque sunt ea voluptas.</div>
<div class="content" id="content4">content4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate repellendus libero repudiandae accusamus eaque at similique ex excepturi voluptas perspiciatis eius assumenda maxime ipsum, soluta vero in laborum iusto cupiditate.</div>
<div class="content" id="content5">content5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eaque molestiae porro facilis incidunt totam, voluptatum temporibus aspernatur consequatur quaerat hic aliquam dolorem, asperiores nobis laudantium. Nesciunt officiis sit rem!</div>
</div>
</div>
建立 css
input[type="radio"] {
position: absolute;
opacity: 0;
}
.tab-group {
margin-bottom: -2px;
}
.panel-group label {
display: inline-block;
width: 40px;
height: 20px;
background: pink;
padding: 10px 20px;
border: 1px solid #ddd;
}
.content-group {
border: 1px solid #ddd;
}
.content-group .content {
background: #fff;
padding: 20px;
display: none;
}
#radio1:checked ~ .tab-group [for="radio1"] {
background: #fff;
border-bottom: 1px solid #fff;
}
#radio2:checked ~ .tab-group [for="radio2"] {
background: #fff;
border-bottom: 1px solid #fff;
}
#radio3:checked ~ .tab-group [for="radio3"] {
background: #fff;
border-bottom: 1px solid #fff;
}
#radio4:checked ~ .tab-group [for="radio4"] {
background: #fff;
border-bottom: 1px solid #fff;
}
#radio5:checked ~ .tab-group [for="radio5"] {
background: #fff;
border-bottom: 1px solid #fff;
}
#radio1:checked ~ .content-group #content1 {
display: block;
}
#radio2:checked ~ .content-group #content2 {
display: block;
}
#radio3:checked ~ .content-group #content3 {
display: block;
}
#radio4:checked ~ .content-group #content4 {
display: block;
}
#radio5:checked ~ .content-group #content5 {
display: block;
}