js实现带箭头的进度流程


Posted in Javascript onMarch 26, 2020

本文实例为大家分享了js实现带箭头进度流程的具体代码,供大家参考,具体内容如下

html

<ul class="cssNav">
  <li v-for="(item,i) in list" :class="[num==i?'active':'']" @click="tab(i)">{{item}}</li>
</ul>

css

.cssNav {
    margin: 100px auto;
    background-color: #dedede;
    width:420px;
  }

  .cssNav li{
    padding:0 20px;
    line-height: 40px;
    background-color: #50abe4;
    display: inline-block;
    color:#fff;
    position: relative;
    margin-right: 4px;
  }
  .cssNav li:after{
    content:"";
    display: block;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid #50abe4;
    position: absolute;
    right:-20px;
    top:0;
    z-index: 10;
  }
  .cssNav li:before{
    content:"";
    display: block;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid #fff;
    position: absolute;
    left:0px;
    top:0;
  }

  .cssNav li:first-child{
    border-radius: 4px 0 0 4px;
    padding-left:25px;
  }
  .cssNav li:last-child,.cssNavEnd{
    border-radius: 0 4px 4px 0;
    padding-right: 25px;
  }
  .cssNav li:first-child:before{
    display: none;
  }
  .cssNav li:last-child:after,.cssNavEnd:after{
    display: none;
  }
  .cssNav li.active { 
    background-color: #ef72b6; 
  } 
  .cssNav li.active:after { 
    border-left-color: #ef72b6; 
  }

js

// 需要引入vue.js 
 new Vue({
    el: '.cssNav',
    data: {
        num:0,
        list:['首页','测试文字','新闻也','地址页']
      },
    methods: {
      tab:function(i){
        this.num = i;
      }
    }  
  })

说明:如果不用vue.js来写,只需要把样式复制就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
js面向对象编程总结
Feb 16 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 #Javascript
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
js中switch语句的学习笔记
Mar 25 #Javascript
JS实现进度条动态加载特效
Mar 25 #Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 #Javascript
You might like
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python实现图像识别功能
2018/01/29 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python 防止死锁的方法
2020/07/29 Python
Python 远程开关机的方法
2020/11/18 Python
python 实现的车牌识别项目
2021/01/25 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
市三好学生主要事迹
2014/01/28 职场文书
消防应急演练方案
2014/02/12 职场文书
海飞丝的广告词
2014/03/20 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
西安事变观后感
2015/06/12 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang