重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何使用CSS实现Tab页切换效果

这篇文章主要介绍如何使用CSS实现Tab页切换效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

宁城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!

三种写法:

1、利用 :hover 选择器

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

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

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

3、利用 label和radio 的绑定关系和 radio选中时的:checked 来实现效果

缺点:HTML结构元素更复杂

如何使用CSS实现Tab页切换效果

经过实验发现第三种方法达到的效果最好。所以下面讲一下第三种实现的方法。

这种方法的写法不固定,我查资料的时候各种各样的写法都有一度让我一头雾水的。最后看完发现总体思路都是一样的,无非就是下面的几个步骤。

  1. 绑定label和radio:这个不用说id和for属性绑定

  2. 隐藏radio按钮:这个方法有很多充分发挥你们的想象力就可以了,我见过的方法有设置 display:none; 隐藏的、设置 绝对定位,将left设置为很大的负值 ,移动到页面外达到隐藏效果、设置**绝对定位:使元素脱离文档流,然后 opacity: 0; **设置为透明来达到隐藏效果。

  3. 隐藏多余的tab页:和上面同理,还可以通过 z-index 设置层级关系来相互遮挡。

  4. 设置默认项:在默认按钮上添加 checked="checked" 属性

  5. 设置选中效果:利用 + 选择器 和 ~ 选择器来设置选中对应元素时下方的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             
             

以上是“如何使用CSS实现Tab页切换效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


分享标题:如何使用CSS实现Tab页切换效果
本文地址:http://cqcxhl.cn/article/jgojoj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP