本篇会放置多种下划线滑动效果，一篇一篇增加，更新中
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>
