本篇會放置多種下劃線滑動效果，一篇一篇增加，更新中
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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
