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. spring + mybatis + mysql/oracle开发

    1)创建一个spring-mybatis-mysql这么一个javaweb或java工程 2)导入spring-ioc,spring-aop,spring-transaction,mybatis,c3 ...

  2. 07 MySQL之视图

    01-视图的含义 视图是从一个或者多个表中导出的,视图的行为与表非常相似,但视图是一个虚拟表.视图还可以从已经存在的视图的基础上定义. 02-创建视图 # 基本语法格式: CREATE [OR REP ...

  3. Oracle CDC (Change Data Capture)更新数据捕获——Asynchronous HotLog Mode（附带简单的kettle任务实现数据同步）

    Performing Asynchronous HotLog Publishing Step 1   Source Database DBA: Set the database initializat ...

  4. c语言实行泛型hashmap

    代码出处:A simple string hashmap in C  https://github.com/petewarden/c_hashmap main.c (main2是官方源代码,main是 ...

  5. mysql 批量kill locked 进程

    mysql -s -e "show processlist;" | grep 'Sending data' | awk '{print "kill "$1&qu ...

  6. 关于Spring的BeanUtils

    文章<用Spring的BeanUtils前,建议你先了解这几个坑>里面,作者最后得到了这几个结论: 1.Spring得BeanUtils得CopyProperties方法需要对应得属性有g ...

  7. Spark Streaming的实时词频和累加词频统计

    (注:运行环境是Ubuntu16, pycharm) 1. 按时段统计:获取scoket端口传输的数据(英文数据即可,方便分词),统计各个时间段内每个单词出现的次数(每个时间段都分别统计,需要使用的关 ...

  8. VUE 1.0

    现代开发模式:vue/react. 20%的时间花在了表现层 传统开发模式:jquery. 80%的时间花在了表现层 MVC——数据.表现.行为分离 视图层(表现层)<----->数据层 ...

  9. makefile中=、：=和+=的区别

    经常有人分不清= .:=和+=的区别  这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...

  10. Centos删除多余的Linux内核

    删除开机多余kernel(centos) yum update 命令会大范围升级,有时候linux内核也会升级,升级后开机画面就会出现多个内核供你选择,所有强迫症的我需要删除旧的 ⒈查看正在使用的内核 ...