用CSS实现Tab页切换效果

Warren 发布于2019-08-26 11:49 / 1663人阅读

摘要：绑定和这个不用说和属性绑定隐藏按钮这个方法有很多充分发挥你们的想象力就可以了，我见过的方法有设置隐藏的设置绝对定位，将设置为很大的负值，移动到页面外达到隐藏效果设置绝对定位使元素脱离文档流，然后设置为透明来达到隐藏效果。

用CSS实现Tab切换效果

最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。

利用:hover选择器

缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果

利用a标签的锚点 + :target选择器

缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。

利用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的代码，样式比较多主要是为了实现各种选中效果，真正用来达到选择切换目地的核心代码就几行

演示地址

代码：





    
    
    
    CSS实现Tab切换效果
    



    
        
            
            选项卡一
            
                111111111111
            
        
        
            
            选项卡二
            
                2222222222222
            
        
        
            
            选项卡三
            
                33333333333333

云服务器 GPU云服务器 tab切换效果导航栏tab切换效果 tab页实现 js实现tab切换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107635.html

用CSS实现Tab页切换效果

摘要：绑定和这个不用说和属性绑定隐藏按钮这个方法有很多充分发挥你们的想象力就可以了，我见过的方法有设置隐藏的设置绝对定位，将设置为很大的负值，移动到页面外达到隐藏效果设置绝对定位使元素脱离文档流，然后设置为透明来达到隐藏效果。用CSS实现Tab切换效果最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。 ...

dayday_up 2019-08-30 14:10 评论0 收藏0
纯CSS实现页签切换效果

摘要：主要运用了的选择器，代码结构跟使用差不多，只是多了几个，不知道性能上是快还是快呢地址主要运用了 CSS3 的 :checked 选择器，代码结构跟使用js差不多，只是多了几个radio，不知道性能上是js快还是css快呢？ codepen地址：http://codepen.io/YuanWing/pen/RPqvad CSS3 TAB ...

stefan 2019-08-28 18:13 评论0 收藏0
用纯css实现Tab切换

摘要：所以当我们思考能否用来实现时还应考虑到的结构，能不能构造出满足已存在的选择器的布局。用来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来，真正做一个组件该做的事，希望越来越好我们今天用css来实现一个常见的tab切换效果查看原文可以有更好的排版效果哦先看效果 https://codepen.io/xboxyan/pe... 前言哪些简单的效果可以考虑用css来实现呢，目前...

hizengzeng 2019-08-30 15:54 评论0 收藏0
动手写一个jquery插件(实践)

摘要：自己实践写一个基于的插件面向对象的写法这里我就不写和了，主要就是分析插件代码代码我上传到上了，如果你们想看结构及样式的话，可以去把源码下来看看地址地址目录结构以及基本结构搭建首先搭建一个插件的框架里调用构造函数配置默认参数及参数获取然后我们自己实践写一个基于jquery的tab插件,面向对象的写法这里我就不写index.html,和index.css了，主要就是分析插件代码tab.j...

Kylin_Mountain 2019-08-22 18:10 评论0 收藏0