纯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栏的切换相关推荐

用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
html导航页面转换,纯CSS实现导航栏Tab切换效果
不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现.下面看看如何使用 CSS ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
JavaScript基础 - 经典案例3 - tab栏选项卡切换
通常我们用 js 写 tab 栏切换功能会用到排他思想,即干掉其他人,留下我自己但也可以用一个更有效率的方法:找出那个特殊的人,精准干掉他,放过其他无辜的人,然后留下我自己实现过程:假设需要切换 ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
tab栏自动切换功能鼠标移动上去取消自动切换离开启动自动切换
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name= ...

纯CSS实现Tab栏的切换

思路

完整例子

inline-block存在的小问题：

纯CSS实现Tab栏的切换相关推荐

最新文章

热门文章