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开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解2014-08-08
JavaScript每天必学之基础知识,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了微信小程序实现限制用户转发的实例代码，通过截图加实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
Egg Vue SSR 服务端渲染数据请求与asyncData
这篇文章主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
button的id不要设置为submit,否则可能会引起混淆，导致表单的submit()方法不能提交表单2014-10-10
这篇文章主要为大家详细介绍了移动端效果之IndexList，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了基于正则表达式的轻量提示插件，兼容性强却文件轻巧的文本框检测插件,推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这这篇文章给大家总结了JavaScript判断元素是否在可视区域的三种方法,getBoundingClientRect,IntersectionObserver和offsetTop、scrollTop这三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
在项目中遇到一个问题，需要在JS中读取数据库中的值，然后再把值返回到页面中，解决方案如下:使用Ajax方法来实现，需要用到ajax.dll（一个ajax技术开发的帮助类库）。2013-07-07
最新评论