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