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>

移动端tab切换时下划线的滑动效果的更多相关文章

  1. tab 切换下划线跟随实现

    HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...

  2. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  3. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  4. 小程序tab切换 点击左右滑动

    wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...

  5. tab切换效果

    选项卡是一个神奇的网页效果,不论大小网站,比如B2B像阿里巴巴,慧聪网,还有B2C这个不用说了吧,爱逛网店的童鞋们都知道的,像京东商城,淘宝网,拍拍网,一号店,凡客诚品,等等各种网各种网店,选项卡不仅 ...

  6. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  7. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  8. 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  9. 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）

    这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class=" ...

随机推荐

  1. input 表单

    1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lang="en"> < ...

  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-4.后端项目分层分包及资源文件处理

    笔记 4.后端项目分层分包及资源文件处理     简介:项目基本目录结构,包名称建立,配置文件建立 1.基本目录结构                 controller             se ...

  3. manage.py migrate 报错

    第一个提示,setting里面的 STATICFILES_DIRS = (  os.path.join(BASE_DIR,'static')) 第二行的后面加','解决,这样可以被识别是tuple. ...

  4. swoole详解

    1.swoole结构图 2.swoole流程图 3.详细流程图 3.1.Master:处理核心事件驱动(主进程)3.2.Reactor: 处理TCP连接,收发数据的线程.Swoole的主线程在Acce ...

  5. ASP.NET Core 入门笔记10，ASP.NET Core 中间件(Middleware)入门

    一.前言 1.本教程主要内容 ASP.NET Core 中间件介绍 通过自定义 ASP.NET Core 中间件实现请求验签 2.本教程环境信息 软件/环境 说明 操作系统 Windows 10 SD ...

  6. Metasploit-初篇

    Metasploit metasploit 是一款开源的安全漏洞检测工具 渗透测试的操作系统 无需赘言,kali Linux发行版是目前最流行的安全操作系统;基于Debian的操作系统附带了600多个 ...

  7. 随便写的Gost安装脚本，作用你懂的，目前只支持CentOS，可以在Aliyun ECS中使用

    服务器 执行下面命令: curl -L aux.pub/gost | bash 或者: curl -L https://gist.githubusercontent.com/inrg/03da1ded ...

  8. 【并行计算-CUDA开发】CUDA bank conflict in shared memory

    http://hi.baidu.com/pengkuny/item/c8070b388d75d481b611db7a 以前以为 shared memory 是一个万能的 L1 cache,速度很快,只 ...

  9. 迭代器iterator和traits编程技法

    前言 这段时间研读SGI-STL-v2.91源码,并提炼核心代码自己实现一遍,感觉受益颇深.觉得有必要写一些文章记录下学习过程的思考,行文旨在总结,会大量参考侯捷<STL源码剖析>的内容. ...

  10. hdoj5909 Tree Cutting（点分治+树上dp转序列dp）

    题目链接:https://vjudge.net/problem/HDU-5909 题意:给一颗树,结点带权值v[i]<m.求异或和为k的子树个数(0<=k<m). 思路: 首先点分治 ...