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