Jquery 实现点击tab切换页签居中

html

<nav class="nav">
<ul class="tab-ul">
	<li class="navbtn item">推荐</li>
	<li class="navbtn item"><a href="###">1111</a></li>
	<li class="navbtn item"><a href="###">2222</a></li>
	<li class="navbtn item"><a href="###">3333</a></li>
	<li class="navbtn item on"><a href="###">4444</a></li>
	<li class="navbtn item"><a href="###">5555</a></li>
	<li class="navbtn item"><a href="###">6666</a></li>
</ul>
</nav>

css

.nav {position: relative;height: 33px;padding: 0 10px;font-size: 0;white-space: nowrap;overflow: auto;scroll-behavior: smooth;width: 100%;margin: 0 auto;}
.nav .tab-ul {display: flex;display: -webkit-flex;}
.nav .navbtn {color: #777;padding: 8px 0px 10px;font-size: 15px;display: inline-block;flex: 0 0 14%;text-align: center;list-style: none;}
.nav .navbtn.on {font-weight: bold;color: #DE293A;font-size: 16px;padding: 8px 0px 9px;}

js

<script>
	$(function(){
	    var moveX = $('.on').position().left + $('.on').parent().scrollLeft();
	    var pageX = document.documentElement.clientWidth;
	    var blockWidth = $('.on').width();
	    var left = moveX - (pageX / 2) + (blockWidth / 2);
	    $(".nav").scrollLeft(left);
	})
</script>

效果图