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)文章
今天小編就為大家分享一篇layui清除radio的選中狀態(tài)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用幻燈片效果的網(wǎng)站目前很普遍，本以為很復(fù)雜，實現(xiàn)起來卻發(fā)現(xiàn)很簡單，現(xiàn)成的jquery插件jquery.KinSlideshow.js便可實現(xiàn)幻燈片效果2013-11-11
原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
怎么在js代碼模式通過代碼觸發(fā)textbox控件的onchange事件呢，經(jīng)過查閱資料，發(fā)現(xiàn)js提供了一個方法，可以觸發(fā)控件的應(yīng)該是所有事件2014-03-03
js css實現(xiàn)垂直方向自適應(yīng)的三角提示菜單
這篇文章主要為大家詳細(xì)介紹了js css實現(xiàn)垂直方向自適應(yīng)的三角提示菜單的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JavaScript實現(xiàn)打字效果的方法,可實現(xiàn)文字陸續(xù)出現(xiàn)的打字效果,涉及javascript時間函數(shù)及頁面元素獲取的相關(guān)技巧,需要的朋友可以參考下2015-07-07
熟悉css的開發(fā)者一定知道圖像替換技術(shù)，也深知它的意義，Dave Shea 曾在他的一篇文章對此做了詳細(xì)的總結(jié)2010-01-01
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)訂單評價和商家評價功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小游戲
這篇文章主要介紹了基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小游戲的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了微信小程序開發(fā)的基本流程步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01