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

2020-11-27 来源：帮我找美食网

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>change tab</title>
 <style>
 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%;
 }
 </style>
</head>
<body>
 <ul>
 <li class="active tab" data-index='0'> 张杰 </li>
 <li class="tab" data-index='1'>周杰伦</li>
 <li class="tab" data-index='2'>林俊杰</li>
 <li class="tab" data-index='3'>薛之谦</li>
 <li class="tab" data-index='4'>你</li>
 </ul>
</body>
<script>
 var lis = document.getElementsByClassName('tab');
 for(var i=0; i<lis.length; i++){
 lis[i].onclick = function(){
 var that = this;
 for(var i=0; i<lis.length; i++){
 lis[i].classList.remove('active')
 this.classList.add('active')
 }
 }
 }
</script>
</html>

显示全文

全部栏目

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