zoukankan      html  css  js  c++  java
  • 利用jq实现横向tab分类切换自动居中

    有时候Tab条目多的时候 一屏展示不完,此时需要一个切换的时候让tab分类自动居中

    <div class="h5ui-tab h5ui-tab2">
     <ul class="tab-item">
          <li id="arts1" class="active">
            <a href="#arts-1">最新</a>
          </li>
          <li id="arts2">
            <a href="#arts-2">成人保险</a>
          </li>
          <li id="arts3">
            <a href="#arts-3">儿童保险</a>
          </li>
          <li id="arts4">
            <a href="#arts-4">老人保险</a>
          </li>
          <li id="arts5">
            <a href="#arts-5">方案设计</a>
          </li>
          <li id="arts6">
            <a href="#arts-6">防坑指南</a>
          </li>
        </ul>
    </div>

    这里需要3个必要的值

    $('.tab-item').on('click', 'li', function (e) {
        // 设备宽度
        let clientWidth = document.body.clientWidth / 2;
        // 节点距离左边距
        let offset_left = e.currentTarget.offsetLeft;
        // li宽度
        let li_width = e.currentTarget.clientWidth / 2;
    
        $('.h5ui-tab2').animate({
          scrollLeft: offset_left + li_width - clientWidth,
        });
        // if(offset_left)
      });
  • 相关阅读:
    Hello World
    JAVA环境变量配置
    基本的Dos命令
    博客的重要性
    MySQL——合并查询结果
    mysql中使用正则表达式查询
    MySQL高级查询
    MySQL之常用函数
    MySQL之多表操作
    MySQL之增删改查
  • 原文地址:https://www.cnblogs.com/benbonben/p/15140974.html
Copyright © 2011-2022 走看看