<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.nav{
width: 300px;
height: 50px;
border:1px solid #000000;
position: relative;
margin:0 auto;
}
.top{
width: 250px;
height: 30px;
position: relative;
margin:0 auto;
display: flex;
justify-content: space-between;
}
a{
display: block;
width: 90px;
height: 30px;
text-align: center;
text-decoration: none;
}
.b{
width: 250px;
height: 30px;
position: relative;
margin:0 auto;
}
.bto{
width: 80px;
height: 10px;
background-color: deeppink;
transition: 0.5s;
}
</style>
<body>
<div class="nav">
<div class="top">
<a href="">Left</a>
<a href="">Center</a>
<a href="">Right</a>
</div>
<div class="b"><div class="bto"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
var m=0
var timerId=null
$('a').click(function(e){
e.preventDefault()
console.log(m)
var x=$(this).index()
if(m<x){
$('.bto').css('width',(x-m+1)*80+'px')
setTimeout(function(){
$('.bto').css('width','80px')
$('.bto').css('marginLeft',x*80+'px')
},500)
}else{
$('.bto').css('marginLeft',x*80+'px')
$('.bto').css('width',(m-x+1)*80+'px')
setTimeout(function(){
$('.bto').css('width','80px')
$('.bto').css('marginLeft',x*80+'px')
},500)
}
m=x
return m
})
</script>
</body>
</html>
效果图: