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 相关文章推荐
jQuery中的val()示例应用
Feb 26 Javascript
javascript制作2048游戏
Mar 30 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
Vue基本指令实例图文讲解
Feb 25 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
解析PHP可变函数的经典用法
2013/06/20 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python中functools模块函数解析
2017/03/12 Python
python中reload(module)的用法示例详解
2017/09/15 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python实现网页自动签到功能
2019/01/21 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
python归并排序算法过程实例讲解
2020/11/04 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
学期自我评价
2014/01/27 职场文书
2014全国两会心得体会
2014/03/17 职场文书
演讲稿格式范文
2014/05/19 职场文书
优秀员工评优方案
2014/06/13 职场文书
场地使用证明模板
2014/10/25 职场文书
市场营销计划书范文
2015/01/16 职场文书
前台岗位职责范本
2015/04/16 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技