移動端導航條點選一個欄目滑動到螢幕中間
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();
})
})