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 相关文章推荐
js实现运行代码需要刷新的解决方法
Aug 18 Javascript
JS解析XML的实现代码
Nov 12 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 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
Zend引擎的发展 [15]
2006/10/09 PHP
php 中include()与require()的对比
2006/10/09 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jquery实现图片预加载
2015/12/25 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Django分页功能的实现代码详解
2019/07/29 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
优秀团员个人事迹材料
2014/01/29 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
媒体宣传策划方案
2014/05/25 职场文书
借名购房协议书范本
2014/10/06 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记