JQ实现滑动TAB切换

最新推荐文章于 2023-05-15 16:27:47 发布

红色波浪号

最新推荐文章于 2023-05-15 16:27:47 发布

阅读量739

点赞数 1

文章标签： css css3 html javascript jquery

本文链接：https://blog.csdn.net/m0_72815229/article/details/127798742

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>滑动选项卡</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <style>
    .btns input {
      width: 100px;
      height: 40px;
      background-color: grey;
      border: 0;
    }

    .cons {
      width: 500px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }

    .slides {
      width: 1500px;
      height: 300px;
      /*把slide加长*/
      position: absolute;
    }

    .cons>.slides>.litteBox {
      width: 500px;
      height: 300px;
      background-color: gold;
      text-align: center;
      line-height: 300px;
      font-size: 30px;
      float: left;
    }

    /* 
    .btns .current {
      background-color: gold;
    } */
  </style>
</head>

<body>
  <div class="btns">
    <input type="button" value="01" style="background-color: gold" />
    <input type="button" value="02" />
    <input type="button" value="03" />
  </div>
  <div class="cons">
    <div class="slides">
      <div class="litteBox">选项卡1的内容</div>
      <div class="litteBox">选项卡2的内容</div>
      <div class="litteBox">选项卡3的内容</div>
    </div>
  </div>
</body>
<script>
  $('.btns>input').click(function () {
    $(this).css('background-color', 'gold').siblings().css('background-color', '')
    $('.slides').animate({
      left: '-500' * $(this).index() + 'px'
    })
  })

</script>

</html>