閑來無事，看到有些網站做了一個移動tab的效果，感覺體驗不錯，是以自己寫了一個半成品，樣式是有點醜，别吐槽哦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
padding:0;
margin:0;
}
.tab{
width: 400px;
height:60px;
border:1px solid #ccc;
margin:100px auto;
position: relative;
background:#ccc;
}
ul{
width: 612px;
position: absolute;
left:0;
top: 0;
transition:all 0.2s;
}
ul li{
width: 100px;
height: 60px;
list-style: none;
float: left;
border-bottom: 1px solid red;
border:1px solid red;
}
</style>
</head>
<body>
<div class="tab" id="tab">
<ul id="list">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<li>tab5</li>
<li>tab6</li>
</ul>
</div>
</body>
<script>
var oTab=document.getElementById('tab');
var list=document.getElementById('list');
var aLi=list.getElementsByTagName('li');
var iBox_W=oTab.offsetWidth;//整個Tab欄的寬度
var iLi_W=aLi[0].offsetWidth;//一個li的寬度
//dis等于一個整個tab的寬度-
var dis=(iBox_W-iLi_W)/2;
var iMax=list.offsetWidth-iBox_W;//限制範圍
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
var iMove=this.index*iLi_W;
list.style.left=-iMove+dis+'px';
var str=parseInt(list.style.left);//保留整數
if(str>=(dis-iLi_W)){//檢測離左邊距離是否大于等于一個dis減去一個li的寬度，臨界值
list.style.left=0;
}
if(-str>=iMax){
list.style.left=-iMax+'px';
}
}
}
</script>
</html>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)