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