好资源导航 » 文章资讯 » js实现带箭头的进度流程

js实现带箭头的进度流程

2023-07-28 01:52:13 68

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

html


{{item}}

css

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

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

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

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

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

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

返回顶部
514930285
czq8825@qq.com

js实现带箭头的进度流程

热门推荐

随机推荐