Answer the question
In order to leave comments, you need to log in
How to add and remove class on button click?
There is a code:
<template>
<div id='table'>
<h4></h4>
<ul id="progress">
<li><div class="node first green activated"></div><router-link class="f-r-link" to="/about"> Установка</router-link></li>
<li><div class="divider grey"></div></li>
<li><div class="node second grey"></div><router-link to="/about"> Введение</router-link></li>
<li><div class="divider grey"></div></li>
</ul>
<router-link class='bnxt' to='/next'>Далее</router-link>
</div>
</template>
<script>
export default {
name: 'TableName',
props: {
msg: String
}}
</script>
<style scoped>
.f-r-link{
color: #42b983;
text-decoration: none;
font-size: 14px;
text-align: center;
line-height: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
}
#table{
position: relative;
right: 30%;
top: 23vmax;
}
*, *:after, *:before { margin:0; padding:0; }
body {
padding: 15px;
font-family: Helvetica, sans-serif;
}
input[type="button"] {
margin-top: 20px;
}
.node {
height: 10px;
width: 10px;
border-radius: 50%;
display:inline-block;
transition: all 1000ms ease;
}
.activated {
box-shadow: 0px 0px 3px 2px rgba(194, 255, 194, 0.8);
}
.divider {
height: 40px;
width: 2px;
margin-left: 4px;
transition: all 800ms ease;
}
li p {
display:inline-block;
margin-left: 25px;
}
li {
list-style: none;
line-height: 1px;
}
.green{ background-color: rgba(92, 184, 92, 1); }
.grey { background-color: rgba(201, 201, 201, 1); }
</style>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question