當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

纯CSS实现Tab栏的切换

發布時間：2025/6/17 CSS 42 豆豆

生活随笔收集整理的這篇文章主要介紹了纯CSS实现Tab栏的切换小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

思路

利用input標簽的radio類型中的checked屬性控制當前選中tab

隱藏radio的顯示，用label標簽的for屬性關聯radio，對label進行樣式編寫實現tab欄的自定義。

一個tab對應一個列表，所有列表初始化做隱藏顯示。

tab和列表同級顯示，才能通過下列選擇器結合去找選中tab對應列表

屬性選擇器'[]'
:checked選擇器
兄弟選擇器'~'
相鄰兄弟選擇器'+'

完整例子

<html><head><title>app下載</title><meta charset="UTF-8"><meta content=yes name=apple-mobile-web-app-capable /><meta content=yes name=apple-touch-fullscreen /><meta content="telephone=no,email=no" name=format-detection /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"><style media="screen">.download {font-size:0;padding: 0 20px;}header {font-size: 18px;padding: 20px 0;border-bottom: 2px solid #e37430;margin-bottom: 5px;}label {display: inline-block;text-align: center;width: 80px;height: 40px;line-height: 40px;background-color: #dcdcdc;color: #000;font-size: 16px;margin-bottom: 1px;}input[type="radio"] {display: none;}input[type="radio"]:checked + label {background-color: #e37430;color: #fff;}input[type="radio"][data-type="mmcm"]:checked ~ .mmcm {display: table;}input[type="radio"][data-type="cmt"]:checked ~ .cmt {display: table;}table {width: 100%;border-bottom: 5px solid #e37430;display: none;font-size: 14px;}table th {background-color: #e37430;color: #fff;height: 33px;line-height: 33px;text-align: center;}table tr {text-align: center;}table tr td {padding: 20px 0;}.btn {height: 20px;line-height: 20px;display: block;width: 80px;margin: 0 auto;background-color: #b1b2b3;border-radius: 4px;color: #000;}.version {color: green;}.signature {color: red;}</style></head><body><div class="download"><header>安裝包平臺</header><input id="project-mmcm" name="project" type="radio" checked="checked" data-type="mmcm"><label for="project-mmcm">安卓</label><input id="project-cmt" name="project" type="radio" data-type="cmt"><label for="project-cmt">iOS</label><table class="mmcm"><thead><tr><th>簽名</th><th>安裝地址</th><th>版本號</th><th>發售日期</th></tr></thead><tbody><tr><td class="signature">test1</td><td><a class="btn" href="http://www.baidu.com">下載安裝</a></td><td class="version">v1.0</td><td>2018-11-15</td></tr></tbody></table><table class="cmt"><thead><tr><th>簽名</th><th>安裝地址</th><th>版本號</th><th>發售日期</th></tr></thead><tbody><tr><td class="signature">test2</td><td><a class="btn" href="http://www.baidu.com">下載安裝</a></td><td class="version">v1.0</td><td>2018-11-15</td></tr></tbody></table></div></body> </html> 復制代碼

注意事項:因為tab要橫向排布，所以label標簽的display設置成inline-block

inline-block存在的小問題：

用了display:inline-block后，存在間隙問題，間隙為4像素，這個問題產生的原因是換行引起的，因為我們寫標簽時通常會在標簽結束符后順手打個回車，而回車會產生回車符，回車符相當于空白符，通常情況下，多個連續的空白符會合并成一個空白符，而產生“空白間隙”的真正原因就是這個讓我們并不怎么注意的空白符。
去除空隙的方法：對父元素添加{font-size:0}，即將字體大小設為0那么那個空白符也變成0px從而消除空隙

總結

以上是生活随笔為你收集整理的纯CSS实现Tab栏的切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。