欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

纯CSS实现Tab栏的切换

发布时间：2025/6/17 CSS 64 豆豆
生活随笔 收集整理的这篇文章主要介绍了 纯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栏的切换的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。