• 利用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)
      });
  • 相关阅读:
    单片机GPIO口模拟串口的方法
    arduino~snprintf
    #7号板问题
    stm8s + si4463 寄存器配置
    linux之cut用法
    74HC123D 引脚介绍及应用
    无线板卡接口定义
    iio adc转换应用编写
    m72 gprs模块的应用编写
    dac7562 应用层实现dac
  • 原文地址:https://www.cnblogs.com/benbonben/p/15140974.html
Copyright © 2020-2023  润新知