当前位置：Gxlcms > css > 用CSS实现Tab页切换效果的示例代码_CSS教程_CSS_网页制作

用CSS实现Tab页切换效果的示例代码_CSS教程_CSS_网页制作

时间：2021-07-01 10:21:17 帮助过：50人阅读

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

1、利用 :hover 选择器

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

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

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

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

缺点：HTML结构元素更复杂

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

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

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

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

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

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

  5. 设置选中效果：利用 + 选择器 和 ~ 选择器来设置选中对应元素时下方的tab页的样式，来达到选中的效果


  1. /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
  2. input[type="radio"]:checked+.test-label {
  3.     /* 为了修饰存在的边框背景属性 */
  4.     border-color: #cbcccc;
  5.     border-bottom-color: #fff;
  6.     background: #fff;
  7.     /* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
  8.     z-index: 10;
  9. }
  10. /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
  11. input[type="radio"]:checked~.tab-box {
  12.     /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
  13.     z-index: 5;
  14. }

这样就可以实现一个Tab页切换的效果了，不用一点儿js，当然肯定也有兼容性的问题。实际操作中tab页还是使用js比较好。下面是小Demo的代码，样式比较多主要是为了实现各种选中效果， 真正用来达到选择切换目地的核心代码就几行

演示地址

代码：


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>CSS实现Tab切换效果</title>
  8.     <style>
  9.         ul {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .clearfloat {
  14.             zoom: 1;
  15.         }
  16.         .clearfloat::after {
  17.             display: block;
  18.             clear: both;
  19.             content: "";
  20.             visibility: hidden;
  21.             height: 0;
  22.         }
  23.         .tab-list {
  24.             position: relative;
  25.         }
  26.         .tab-list .tab-itom {
  27.             float: left;
  28.             list-style: none;
  29.             margin-right: 4px;
  30.         }
  31.         .tab-itom .test-label {
  32.             position: relative;
  33.             display: block;
  34.             width: 85px;
  35.             height: 27px;
  36.             border: 1px solid transparent;
  37.             border-top-left-radius: 5px;
  38.             border-top-right-radius: 5px;
  39.             line-height: 27px;
  40.             text-align: center;
  41.             background: #e7e8eb;
  42.         }
  43.         .tab-itom .tab-box {
  44.             /* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
  45.             position: absolute;
  46.             left: 0;
  47.             top: 28px;
  48.             width: 488px;
  49.             height: 248px;
  50.             border: 1px solid #cbcccc;
  51.             border-radius: 5px;
  52.             border-top-left-radius: 0px;
  53.             background: #fff;
  54.             /* 设置层级最低方便选中状态遮挡 */
  55.             z-index: 0;
  56.         }
  57.         /* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
  58.         input[type="radio"] {
  59.             position: absolute;
  60.             opacity: 0;
  61.         }
  62.         /* 利用选择器实现  tab切换 */
  63.         /* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
  64.         input[type="radio"]:checked + .test-label {
  65.             /* 为了修饰存在的边框背景属性 */
  66.             border-color: #cbcccc;
  67.             border-bottom-color: #fff;
  68.             background: #fff;
  69.             /* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
  70.             z-index: 10;
  71.         }
  72.         /* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
  73.         input[type="radio"]:checked ~ .tab-box {
  74.             /* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
  75.             z-index: 5;
  76.         }
  77.     </style>
  78. </head>
  79. <body class="clearfloat">
  80.     <ul class="tab-list clearfloat">
  81.         <li class="tab-itom">
  82.             <input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
  83.             <label class="test-label" for="testTabRadio1">选项卡一</label>
  84.             <p class="tab-box">
  85.                 111111111111
  86.             </p>
  87.         </li>
  88.         <li class="tab-itom">
  89.             <input type="radio" id="testTabRadio2" class="test-radio" name="tab">
  90.             <label class="test-label" for="testTabRadio2">选项卡二</label>
  91.             <p class="tab-box">
  92.                 2222222222222
  93.             </p>
  94.         </li>
  95.         <li class="tab-itom">
  96.             <input type="radio" id="testTabRadio3" class="test-radio" name="tab">
  97.             <label class="test-label" for="testTabRadio3">选项卡三</label>
  98.             <p class="tab-box">
  99.                 33333333333333
  100.             </p>
  101.         </li>
  102.     </ul>
  103. </body>
  104. </html>

以上就是用CSS实现Tab页切换效果的示例代码_CSS教程_CSS_网页制作的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！