js和jquery选项卡菜单自动居中

@搬砖小能手

于 2022-07-04 17:19:25 发布

阅读量268

点赞数

分类专栏： css 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_44706621/article/details/125604576

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js和jquery选项卡菜单自动居中

效果如下

在这里插入图片描述

代码如下

代码分为js和jquery部分

<!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>js选项卡居中</title>
  <script src="./js/jq.js"></script>
  <style>
    .container {
      height: 200px;
      width: 800px;
      background-color: #eee;
      white-space: nowrap;
      overflow: auto;
      position: relative;
      /* 可以使窗口平稳滚动 */
      scroll-behavior: smooth;
      margin: 0 auto;
    }

    .item {
      width: 220px;
      height: 100px;
      background-color: blue;
      display: inline-block;
      text-align: center;
      line-height: 100px;
    }

    .item:nth-child(2n) {
      background-color: pink;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>

</body>

</html>
<script>
  /**
   * Jquery代码
  */
  $(function () {
    let tabUlWidth = parseInt($(".container").css("width"))
    $(".container .item").click(function () {
      const itemLeft = $(this)[0].offsetLeft
      const itemMarginRight = parseInt($(this).css("marginRight"))
      const itenWidth = parseInt($(this).css("width"))

      const scrollLeftNum = itemLeft - tabUlWidth / 2 + itenWidth / 2
      $(this).parent().scrollLeft(scrollLeftNum)
      console.log('itemLeft', itemLeft);
    })


  })

  /**
    * JS代码
   */

  // // 获取到 container 整个盒子
  // var container = document.querySelector(".container");

  // // 获取包裹盒子 container.offsetWidth
  // var containerW = container.offsetWidth;

  // // 找到所有需要被点击的 item 的集合
  // var itemList = document.querySelectorAll(".item");

  // // 遍历数组
  // for (let i = 0; i < itemList.length; i++) {
  //   // 给每个元素添加点击事件
  //   itemList[i].onclick = function () {

  //     // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
  //     var scrollLeftNum = itemList[i].offsetLeft - containerW / 2 + itemList[i].offsetWidth / 2;
  //     // console.log(scrollLeftNum, '距离',itemList[i].offsetLeft)

  //     // 赋值
  //     container.scrollLeft = scrollLeftNum;
  //   }
  // }
</script>