js实现移动端标签切换时下划线滑动效果

本篇会放置多种下划线滑动效果，一篇一篇增加，更新中

1、当前标签出现下划线的同时，前一个下划线同时消失（出现方向与消失方向保持一致),伴随过渡效果。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题更改选项卡/title style ul { display : flex；绝对位置：宽度： 800像素；前：名50%；左侧： 50%;transform: translate(-50%，-50%)；列表样式：无；} li {位置：相对位置；padding: 20pxcolor: # 000线高： 1;跃迁： 0.2s全线性；光标：指针；} li:before之前在{内容： }之前；绝对位置：top : 0；左： 100%;宽度： 0;高度： 100%;边框-底部： 2px实心# f00跃迁： 0.2s全线性；}李：活跃{后台： # 000；color: # fff}。{左侧： 0 }之前的活动的~ li:before }。活动的li:before。在{宽度： 100%之前；左： 0；top : 0；} .在{宽度： 200%之前悬停：}/style/head body ul Li class=' active tab '数据-索引='0 '张杰/li li class='tab '数据-索引='1 '周杰伦/li li class='tab '数据-索引='2 '林俊杰/li li class='tab '数据-索引='3 '薛之谦/li li class='tab '数据-索引='4 '你/Li/ul/正文脚本var lis=文档。getelementsbyclassname(' tab ')；for(var I=0；长度；i ){ lis[i].onclick=function(){ var=this；for(var I=0；长度；我)。班级名单。删除此(活动的)。班级名单。add(' active ')} } }/script/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。