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. instanceof 实现

    A instanceof B // 实现 instanceof function instance(a, b) { const proto = a.__proto__; // eslint-disab ...

  2. CPU排行-台式

    此文已经于2017年11月1日更新!来源于极速空间 实际对比: intel i3-7100(双核四线程) CPU性能远超过 AMD X4 860K(四核四线程) intel i5-7500(四核四线程 ...

  3. ApkUtils

    import android.content.Context; import android.content.Intent; import android.content.pm.PackageInfo ...

  4. 10.service 详解

    10.service 详解 什么是service:Kubernetes中的Service 是一个抽象的概念,它定义了Pod的逻辑分组和一种可以访问它们的策略,这组Pod能被Service访问,使用YA ...

  5. 大数据HIve

    1. 题目说明 设计题:MySQL数据库A有1000w条数据,完成统计再输入到另外的B表中 A表 test1 0.2,3.5,1,1test1 1.2,2.3,4.56test2 2.1,0.3,9. ...

  6. MATLAB学习（八）神经网络拟合工具箱 Neural Net Fitting使用示例

    >> x=-3:0.2:5;y=x.^2-1;xn=-2:0.1:7; >>     >> %多元函数(z=sin(x2+y2)/(x2+y2))拟合 >&g ...

  7. [LeetCode 206] Reverse Linked List 翻转单链表

    本题要求将给定的单链表翻转,是校招面试手撕代码环节的高频题,能很好地考察对单链表这一最简单数据结构的理解:可以使用迭代和递归两种方法对一个给定的单链表进行翻转,具体实现如下: class Soluti ...

  8. c语言数组类型默认值（c99）

    #include <stdio.h> #include <stdlib.h> int main() { ] = {}; //每个值默认0 ; i < len; i ++) ...

  9. RocketMQ之九：RocketMQ消息发送流程解读

    在讨论这个问题之前,我们先看一下Client的整体架构. Producer与Consumer类体系 从下图可以看出以下几点:(1)Producer与Consumer的共同逻辑,封装在MQClientI ...

  10. 【OpenCV】轮廓的特征矩Moment

    opencv中的矩主要包括以下几种:空间矩,中心矩和中心归一化矩. class Moments { public: ...... // 空间矩 double m00, m10, m01, m20, m ...