有时候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) });