纯 CSS 利用 label + input 实现选项卡

最新推荐文章于 2024-04-18 20:40:14 发布

weixin_34144848

最新推荐文章于 2024-04-18 20:40:14 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cckui/p/9968246.html

本文详细介绍了CSS中的scroll-behavior属性和平滑滚动效果的应用，同时讲解了clip属性如何用于剪裁绝对定位元素，通过示例代码展示了如何结合这两种属性实现选项卡的平滑切换效果。

clip 属性

用于剪裁绝对定位元素。

.class {
      position:absolute;
      clip:rect(0px,60px,200px,0px);
  }

scroll-behavior: smooth;

作用在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换，变成平滑过渡切换效果。

代码：

<!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 利用label 和input 实现选项卡</title>
    <style>
    .tab label {
      padding: 10px;
      border: 1px solid #ccc;
      margin-right: -1px;
      text-align: center;
      float: left;
      overflow: hidden;
    }

    /* 清除浮动 */
    .tab::after {
      content: "";
      display: table;
      clear: both;
    }

    .box {
      height: 200px;
      border: 1px solid #ccc;
      scroll-behavior: smooth;  /* 缓冲效果 */
      overflow: hidden;
      margin-top: 10px;
    }

    .item {
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .item input {
      position: absolute;
      top: 0;
      height: 100%;
      width: 1px;
      border: 0;
      padding: 0;
      margin: 0;
      clip: rect(0 0 0 0);
    }
  </style>
</head>

<body>
    <h1>tab</h1>
    <div class="tab">
        <label for="tab1">tab1</label>
        <label for="tab2">tab2</label>
        <label for="tab3">tab3</label>
    </div>
    <div class="box">
        <div class="item">
            <!-- 点击label时，for对应的input会获得焦点, 并且出现在容器中的可视位置 -->
            <!-- 为禁止手机端自带键盘弹出，需要给input加上“readonly”属性 -->
            <input type="text" id="tab1" readonly>
            <p>选项卡1内容</p>
        </div>
        <div class="item">
            <input type="text" id="tab2" readonly>
            <p>选项卡2内容</p>
        </div>
        <div class="item">
            <input type="text" id="tab3" readonly>
            <p>选项卡3内容</p>
        </div>
    </div>
    <footer>
        bottom
    </footer>
</body>

</html>

转载于:https://www.cnblogs.com/cckui/p/9968246.html