js实现移动端tab切换时下划线滑动效果
更新时间:2019年09月08日 11:11:28 作者:BetterGG
这篇文章主要为大家详细介绍了js实现移动端tab切换时下划线滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本篇会放置多种下划线滑动效果,一篇一篇增加,更新中
1、当前 tab 出现下划线的同时,前一个下划线同时消失(出现方向与消失方向保持一致),伴随过渡效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!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 > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
这篇文章主要介绍了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法,涉及javascript动态创建页面元素、事件监听、回调函数使用等相关操作技巧,需要的朋友可以参考下2018-09-09
最新评论