这篇文章为大家详细主要介绍了js实现带箭头的进度流程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

html

<ul>
  <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来写,只需要把样式复制就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

    无相关信息
最新资讯
华为智能汽车蔡建永:当前智能汽车更像手机时代的山寨机

华为智能汽车蔡建永:当

华为智能汽车解决方案BU CTO蔡建永表示,当前市面上很多
逐鹿“飞行汽车”,通用、小鹏、吉利为何都来了?

逐鹿“飞行汽车”,通用

从这个角度来看,飞行汽车存在成本高企、应用场景有待开
美团互助关停,网络互助行业走到分水岭

美团互助关停,网络互助

这次关停可以理解为是整个网络互助行业的一个分水岭。
俄媒:脸书公司悄悄“解封”特朗普脸书账号和Ins账号

俄媒:脸书公司悄悄“解

“今日俄罗斯”(RT)16日最新消息,脸书公司悄悄恢复了美国
特斯拉首任中国区总经理郑顺景离世 多位好友发文悼念

特斯拉首任中国区总经

特斯拉首任中国区总经理郑顺景离世,原因未知,多位好友已
Jeff Dean万字长文:2020谷歌10大领域AI技术发展

Jeff Dean万字长文:202

2021年已经度过十余天,Jeff Dean也在酝酿后在Google AI
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,