HTML

<ul class="tab-head">
            <li class="tab-head-item active">衣服</li>
            <li class="tab-head-item">褲子</li>
            <li class="tab-head-item">鞋子</li>
            <li class="tab-head-item">挎包</li>
            <li class="tab-head-item">圍巾</li>
            <li class="tab-head-item">帽子</li>
            <li class="tab-head-item">手機</li>
            <li class="tab-head-item">電腦</li>
            <li class="tab-head-item">飛機</li>
            <li class="tab-head-item">數碼相機</li>
            <li class="tab-head-item">茶杯</li>
            <li class="tab-head-item">視訊</li>
            <li class="tab-head-item">軍事</li>
            <li class="tab-head-item">新聞</li>
            <li class="tab-head-item">社會</li>
            <li class="tab-head-item">娛樂</li>
            <li class="tab-head-item">地理</li>
       </ul>

CSS

/*-webkit-overflow-scrolling: touch;*/
            .tab-head::-webkit-scrollbar{
                display: none;
            }
            *{ margin: 0; padding: 0;}
            .tab-head{
                margin: 0 auto;
                list-style-type: none;
                display:flex;
                flex-wrap:nowrap;
                justify-content:space-between;
                background:#FF4878;
                padding:0;
                overflow:auto;
            }
            .tab-head-item{
                flex:1 0 auto;
                color:white;
                padding:0 20px;
                height: 40px;
                line-height: 40px;
            }
            .active{
                background-color: gold;
                margin: auto;
            }
            div{
                position: absolute;
                left: 0;
                top: 50px;
                width: 100%;
                height: 500px;
                background-color: aquamarine;
                display: none;
            }

JS

$(function(){
                $(".tab-head li").click(function(){
                    var moveX = $(this).position().left+$(this).parent().scrollLeft();
                    var pageX = document.documentElement.clientWidth;//裝置的寬度
                    var blockWidth = $(this).width();
//                  console.log(moveX);
//                  console.log(pageX);
//                  console.log(blockWidth);
                    var left = moveX-(pageX/2)+(blockWidth/2);
//                  console.log(left);
                    $(".tab-head").animate({scrollLeft:left},400);
                    $(this).addClass("active").siblings().removeClass("active");
                    var index = $(this).index();
                    console.log(index);
                    $('div').eq(index).show().siblings("div").hide();
                })
            })