今天稍微查了一下类似的，要么写得很多，要不代码补全，这个东西哪有那么复杂。
滚动切换的逻辑其实特别简单，只要看懂了这个做一些较复杂的功能也可以举一反三了。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tab滚动切换</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 40px;
margin: 0 auto;
border: 4px solid forestgreen;
position: relative;
}
#tab{
transition: all 1s;
width:200px;
height: 40px;
border: 1px solid #03A9F4;
box-sizing: border-box;
background: #34495E;
position: absolute;
top: 0;
z-index: -1;
}
ul{
list-style: none;
display: flex;
}
ul li{
width: 400px;
height: 40px;
text-align: center;
line-height: 40px;
color: royalblue;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tab"></div>
</div>
</body>
<script>
let li = document.querySelectorAll("li");
let tab = document.getElementById("tab");
for(let x = 0; x < li.length ; x++){
let len = x*200+"px";
li[x].onclick = function(){
tab.style.transform = "translateX("+len+")";
}
}
</script>
</html>