js实现移动端tab切换时下划线滑动效果

本篇会放置多种下划线滑动效果，一篇一篇增加，更新中

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生javascript移动端滑动banner效果

    本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,

  • js原生实现移动端手指滑动轮播图效果的示例

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0

  • JS实现移动端整屏滑动的实例代码

    基本思路: 1)检测手指滑动方向:获取手指抬起时的位置,减去手指按下时的位置,得正即为向下滑动了 2)手指抬起后,向对应反向操作改变当前页的位置 具体代码如下: html <div id="wrap"> <div id="page01" class="pages">第一屏</div> <div id="page02" class="pages">第二屏<

  • 基于slideout.js实现移动端侧边栏滑动特效

    基于slideout.js实现移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢 先看下运行效果: 一.准备资料 只需要准备slideout.js库即可: https://github.com/Mango/slideout/blob/master/dist/slideout.js 小图标: 二.实现代码 HTML代码: <!doctype html> <html lang

  • 浅谈移动端之js touch事件 手势滑动事件

    现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.

  • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢. 以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法. HTML部分 <div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2"

  • JavaScript实现移动端滑动选择日期功能

    JavaScript实现移动端滑动选择日期功能

    本文实例为大家分享了JavaScript实现滑动选择日期的具体代码,供大家参考,具体内容如下 $(page).on('touchmove','#touchMoveTime',function (event) { touchMove(event); }); scrollBarInit(); //初始化 function scrollBarInit() { var defaultValue = 3,maxValue = 30; var myDate = new Date(); var year =

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

  • js实现移动端导航点击自动滑动效果

    js实现移动端导航点击自动滑动效果

    本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

  • Swiper.js实现移动端元素左右滑动

    swiper.js也是一个很好用的移动端的js库. 需要引入它的css文件和js文件.用法很简单,加入相应的类即可,看一下Demo,很容易看懂. 我的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport

随机推荐