CSS作為網(wǎng)頁(yè)美化的重要工具，經(jīng)常用來(lái)制作各種效果。今天我們要來(lái)學(xué)習(xí)一種純CSS實(shí)現(xiàn)的Tab滑動(dòng)效果。

.tab {
display: flex;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none; /* 隱藏滾動(dòng)條 */
-ms-overflow-style: none; /* 隱藏滾動(dòng)條 */
}
.tab::-webkit-scrollbar {
display: none; /* 隱藏滾動(dòng)條 */
}
.tab label {
display: inline-block;
padding: 10px;
cursor: pointer;
}
.tab input[type="radio"] {
display: none;
}
.tab .content {
width: 100%;
}
.tab .content >div {
width: 100%;
display: none;
}
/* 當(dāng)選中 input[type="radio"] 時(shí)的樣式 */
.tab input[type="radio"]:checked + label {
color: #fff;
background-color: #4c4c4c;
}
/* 當(dāng)選中 input[type="radio"] 時(shí)顯示相應(yīng)的內(nèi)容 */
.tab input[type="radio"]:checked ~ .content >div {
display: block;
}

以上就是實(shí)現(xiàn)純CSS的Tab滑動(dòng)效果的代碼。其中用到了flex布局，overflow-x屬性等。在選中標(biāo)簽時(shí)，通過(guò)CSS選擇器“~”來(lái)選中相應(yīng)的內(nèi)容，并將其顯示。