tab点击的时候后面隐藏的标签顶出来

동경

已于 2022-10-10 21:22:33 修改

阅读量127

点赞数

分类专栏： Html Css Js 文章标签： javascript 前端开发语言

于 2022-10-09 18:01:08 首次发布

本文链接：https://blog.csdn.net/weixin_43814775/article/details/127231234

版权

Html Css 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

26 篇文章 0 订阅

订阅专栏

法国右边是有德国的，现在是看不到，因为被隐藏了
在这里插入图片描述

当点击法国的时候，德国就出来了
在这里插入图片描述

那我们看具体的实现方式吧

父标签绑定ID father-tab

子标签绑定ID son-tab


  const father_dom = document.getElementById('father-tab');
  const son_dom = document.getElementById('son-tab');
  
  if (son_dom) {
    const clientWidth = father_dom.clientWidth;
    const offsetLeft = son_dom.offsetLeft;
    father_dom.scrollLeft = (offsetLeft - (clientWidth / 2) + son_dom.clientWidth / 2);
  }