android tab下划线一起滑动,js实现移动端tab切换时下划线滑动效果

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

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

change tab

ul {

display: flex;

position: absolute;

width: 800px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

list-style: none;

}

li {

position: relative;

padding: 20px;

color: #000;

line-height: 1;

transition: 0.2s all linear;

cursor: pointer;

}

li::before {

content: "";

position: absolute;

top: 0;

left: 100%;

width: 0;

height: 100%;

border-bottom: 2px solid #f00;

transition: 0.2s all linear;

}

li:active {

background: #000;

color: #fff;

}

.active ~ li::before {

left: 0;

}

.active::before {

width: 100%;

left: 0;

top: 0;

}

.hover::before{

width: 200%;

}

• 张杰
• 周杰伦
• 林俊杰
• 薛之谦
• 你

var lis = document.getElementsByClassName('tab');

for(var i=0; i

lis[i].onclick = function(){

var that = this;

for(var i=0; i

lis[i].classList.remove('active')

this.classList.add('active')

}

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。