js實現移動端tab切換時下劃線滑動效果
更新時間：2019年09月08日 11:11:28 作者：BetterGG
這篇文章主要為大家詳細介紹了js實現移動端tab切換時下劃線滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇會放置多種下劃線滑動效果，一篇一篇增加，更新中
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Javascript和Java、C這些語言不同，它是一種無類型、弱檢測的語言。它對變量的定義并不需要聲明變量類型，我們只要通過賦值的形式，可以將各種類型的數據賦值給同一個變量2012-01-01
比較實用的多款瀏覽器判斷代碼，需要的朋友可以收集下，適合需要區(qū)別對待不同瀏覽器，執(zhí)行不用的操作的代碼。2010-04-04
這篇文章給大家主要介紹了JavaScript中cookie工具函數的封裝，文中給出了詳細的實現步驟和示例代碼，相信會對大家的理解很有幫助，有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了JavaScript自定義數組排序方法,實例分析了javascript自定義數組排序的原理與實現技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
split()方法可以利用字符串的子字符串的作為分隔符將字符串分割為字符串數組，并返回此數組，本文給大家介紹javascript split 方法，對本文感興趣的朋友一起學習吧2015-12-12
JavaScript中的所有事物都是對象，本文為大家介紹下JS中創(chuàng)建對象的幾種方式，如原始方法、工廠方法等等2014-01-01
本文主要是想實現瀏覽器的CTRL+F功能,提供個思路和代碼，需要的朋友可以參考下2014-06-06
這篇文章介紹了JS中的幾種循環(huán)和跳出方式，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
原生js實現仿window10系統(tǒng)日歷效果的實例
下面小編就為大家?guī)硪黄鷍s實現仿window10系統(tǒng)日歷效果的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
bind函數，顧名思義，用于為調用函數綁定一個作用域，因為this很容易跟丟它原來所在的作用域，直接指向頂層的window對象。2010-01-01