极乐门资源网 Design By www.ioogu.com
最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。
1、利用 :hover 选择器
缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的效果
2、利用 a标签的锚点 + :target选择器
缺点:因为锚点会将选中的元素滚动到页面最上面,每次切换位置都要移动,体验极差。
3、利用 label和radio 的绑定关系和 radio选中时的:checked 来实现效果
缺点:HTML结构元素更复杂
经过实验发现第三种方法达到的效果最好。所以下面讲一下第三种实现的方法。
这种方法的写法不固定,我查资料的时候各种各样的写法都有一度让我一头雾水的。最后看完发现总体思路都是一样的,无非就是下面的几个步骤。
- 绑定label和radio:这个不用说id和for属性绑定
- 隐藏radio按钮:这个方法有很多充分发挥你们的想象力就可以了,我见过的方法有设置 display:none; 隐藏的、设置 绝对定位,将left设置为很大的负值 ,移动到页面外达到隐藏效果、设置**绝对定位:使元素脱离文档流,然后 opacity: 0; **设置为透明来达到隐藏效果。
- 隐藏多余的tab页:和上面同理,还可以通过 z-index 设置层级关系来相互遮挡。
- 设置默认项:在默认按钮上添加 checked="checked" 属性
- 设置选中效果:利用 + 选择器 和 ~ 选择器来设置选中对应元素时下方的tab页的样式,来达到选中的效果
/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */ input[type="radio"]:checked+.test-label { /* 为了修饰存在的边框背景属性 */ border-color: #cbcccc; border-bottom-color: #fff; background: #fff; /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */ z-index: 10; } /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */ input[type="radio"]:checked~.tab-box { /* 选中时提升层级,遮挡其他tab页达到选中切换的效果 */ z-index: 5; }
这样就可以实现一个Tab页切换的效果了,不用一点儿js,当然肯定也有兼容性的问题。实际操作中tab页还是使用js比较好。下面是小Demo的代码,样式比较多主要是为了实现各种选中效果, 真正用来达到选择切换目地的核心代码就几行
演示地址
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS实现Tab切换效果</title> <style> ul { margin: 0; padding: 0; } .clearfloat { zoom: 1; } .clearfloat::after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .tab-list { position: relative; } .tab-list .tab-itom { float: left; list-style: none; margin-right: 4px; } .tab-itom .test-label { position: relative; display: block; width: 85px; height: 27px; border: 1px solid transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; line-height: 27px; text-align: center; background: #e7e8eb; } .tab-itom .tab-box { /* 设置绝对定位方便定位相对于tab-list栏的位置,同时为了可以使用z-index属性 */ position: absolute; left: 0; top: 28px; width: 488px; height: 248px; border: 1px solid #cbcccc; border-radius: 5px; border-top-left-radius: 0px; background: #fff; /* 设置层级最低方便选中状态遮挡 */ z-index: 0; } /* 用绝对定位使按钮脱离文档流,透明度设置为0将其隐藏 */ input[type="radio"] { position: absolute; opacity: 0; } /* 利用选择器实现 tab切换 */ /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */ input[type="radio"]:checked + .test-label { /* 为了修饰存在的边框背景属性 */ border-color: #cbcccc; border-bottom-color: #fff; background: #fff; /* 为了修饰存在的层级使下边框遮挡下方div的上边框 */ z-index: 10; } /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */ input[type="radio"]:checked ~ .tab-box { /* 选中时提升层级,遮挡其他tab页达到选中切换的效果 */ z-index: 5; } </style> </head> <body class="clearfloat"> <ul class="tab-list clearfloat"> <li class="tab-itom"> <input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked"> <label class="test-label" for="testTabRadio1">选项卡一</label> <div class="tab-box"> 111111111111 </div> </li> <li class="tab-itom"> <input type="radio" id="testTabRadio2" class="test-radio" name="tab"> <label class="test-label" for="testTabRadio2">选项卡二</label> <div class="tab-box"> 2222222222222 </div> </li> <li class="tab-itom"> <input type="radio" id="testTabRadio3" class="test-radio" name="tab"> <label class="test-label" for="testTabRadio3">选项卡三</label> <div class="tab-box"> 33333333333333 </div> </li> </ul> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
CSS,Tab页切换
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无用CSS实现Tab页切换效果的示例代码的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]