js实现移动端tab切换时下划线滑动效果


Posted in Javascript onSeptember 08, 2019

本篇会放置多种下划线滑动效果,一篇一篇增加,更新中

1、当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果。

js实现移动端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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
详解JavaScript中return的用法
May 08 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
swiper4实现移动端导航切换
Oct 16 #Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 #Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 #Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 #Javascript
You might like
如何在php中正确的使用json
2013/08/06 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
php单例模式示例分享
2015/02/12 PHP
php防止sql注入简单分析
2015/03/18 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
详解如何设置Python环境变量?
2019/05/13 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python进度条的制作代码实例
2019/08/31 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
黄金搭档广告词
2014/03/21 职场文书
向女朋友道歉的话
2015/01/20 职场文书
网络销售员岗位职责
2015/04/11 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python