A
A
alaskafx2021-03-22 17:45:45
css
alaskafx, 2021-03-22 17:45:45

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>

The thing is, when the user clicked on the router-link with the class "bnxt" - the class "activated" was added to the div with the classes "node second gray", and the class "activated" was removed from the div with the classes "node first green".
I tried, read, looked - but it still doesn’t work, well, it just doesn’t work.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
W
WapSter, 2021-03-22
@alaskafx


But such a principle is so-so when you use vue, but I'm too lazy to invent for you. I used events, it's better to use hooks for the router

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question