這是純 CSS 頁籤 1
完全不需要 JavaScript，只靠 CSS 就能切換。
如果這個頁籤能正常運作，代表 CSS 層級沒有被 Enlighter 破壞。
這是純 CSS 頁籤 2
這裡可以放任何內容，包含列表、表格或圖片。
這是純 CSS 頁籤 3
測試重點：切換時有沒有閃爍、跑版或失效。
.tabs-css {
max-width: 720px;
margin: 30px auto;
font-family: system-ui, sans-serif;
}
.tabs-css input[type="radio"] {
display: none;
}
.tabs-css .tab-labels {
display: flex;
gap: 4px;
margin-bottom: 0;
}
.tabs-css .tab-labels label {
flex: 1;
text-align: center;
padding: 12px 16px;
background: #f0f0f0;
border: 3px solid #0a0a0a;
border-bottom: none;
border-radius: 8px 8px 0 0;
cursor: pointer;
font-weight: 700;
transition: 0.2s;
}
.tabs-css .tab-labels label:hover {
background: #c2ff3d;
}
.tabs-css .tab-content {
display: none;
padding: 24px;
border: 3px solid #0a0a0a;
border-radius: 0 0 8px 8px;
background: #fff8e7;
box-shadow: 6px 6px 0 #0a0a0a;
}
/* 選中狀態 */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"] {
background: #ff4d8d;
color: #fff;
}
#tab1:checked ~ .content-1,
#tab2:checked ~ .content-2,
#tab3:checked ~ .content-3 {
display: block;
}
這是純 CSS 頁籤 1
完全不需要 JavaScript，只靠 CSS 就能切換。
如果這個頁籤能正常運作，代表 CSS 層級沒有被 Enlighter 破壞。
這是純 CSS 頁籤 2
這裡可以放任何內容，包含列表、表格或圖片。
這是純 CSS 頁籤 3
測試重點：切換時有沒有閃爍、跑版或失效。
列印本文 [1]