实现效果

HTML部分

<div class="tab"><ul class="tab-nav"><li><a href="#" class="active" >用户管理</a></li><li><a href="#" >配置管理</a></li><li><a href="#">角色管理</a></li><li><a href="#">定时任务补偿</a></li><li class="shortline"></li></ul><div class="line"></div><div class="tab-content"><p class="item active">用户管理</p><p class="item">配置管理</p><p class="item">角色管理</p><p class="item">定时任务补偿</p></div></div>

CSS部分

<style>*{padding: 0;margin: 0;box-sizing: border-box;}.tab{margin: 50px auto;width: 870px;height: 120px;border: 1px solid rgb(228, 231, 237);border-radius: 3px;padding: 25px;}.tab .tab-nav{position: relative;list-style: none;display: flex;height: 40px;line-height: 40px;border-bottom: 2px solid rgb(228, 231, 237);}.tab .tab-nav li{margin-right: 25px;}.tab .tab-nav a{text-decoration: none;color: #303133;height: 40px;line-height: 40px;transition: all 0.5s;}.tab .tab-nav .shortline{z-index: 2;position: absolute;bottom: -1px;height: 2px;width:64px;background-color: #409eff;transition: all 1s;}.tab .tab-nav a:hover{color: #409eff;}.tab .tab-content{display: flex;}.tab .tab-content p{display: none;font-size: 18px;}.tab .tab-content p.active{display: block;}</style>

JS部分

const as = document.querySelectorAll('a')for(let i= 0;i<as.length;i++){as[i].addEventListener('click',function(){// 1.tab-navdocument.querySelector('.tab-nav .active').classList.remove('active')this.classList.add('active')// 2.tab-contentdocument.querySelector('.tab-content .active').classList.remove('active')document.querySelector(`.tab-content .item:nth-child(${i+1})`).classList.add('active')// 3.shortlinedocument.querySelector('.shortline').style.width=as[i].offsetWidth+'px'document.querySelector('.shortline').style.left=as[i].offsetLeft+'px'})}