Selected Tab highlighted until the user not clicked to the another tab in vuejs

I need to highlight the current tab until user can not clicked to the next tab. Hover can only help to highlight the tab but once chooses the any other things hover tab gone.

For example i clicked to the categories tab, it will highlighted but once chooses any product inside the categories it will not show.
Can anyone help me how to do that?

<template>
  <div>
    <div class="navbar w-100 is-white is-fixed-bottom bottom-navbar is-hidden-desktop is-mobile">
      <div class="nav-highlight">
        <router-link to="/">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/home.jpeg" alt="home icon" /></div>
            <div class="s-small f-size">Home</div>
          </div>
        </router-link>
      </div>

      <div class="nav-highlight">
        <router-link to="/categories">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/products.jpeg" alt="product icon" /></div>
            <div class="s-small f-size">Products</div>
          </div>
        </router-link>
      </div>

      <div class="nav-highlight">
        <router-link to="/wish-list">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/wishlist.jpeg" alt="wishlist icon" /></div>
            <div class="s-small f-size">Wislist</div>
          </div>
        </router-link>
      </div>

      <div class="nav-highlight">
        <router-link to="/redeem-point">
          <div class="has-text-centered column is-3">
            <div><img class="image-resize" src="@/assets/redeem.jpeg" alt="redeem icon" /></div>
            <div class="s-small f-size">Redeem Points</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FooterNavBar',
  components: {},
};
</script>

<style scoped>
.bottom-navbar {
  display: flex;
  width: 100%;
  background: white;
  justify-content: space-evenly;
}
.nav-highlight{
  width: 25%;
}
 .nav-highlight :hover {
    background-color: rgb(194, 193, 193);
} 
.image-resize {
  width: 180px;
  height: 26px;
}
}
</style>



Read more here: https://stackoverflow.com/questions/67381025/selected-tab-highlighted-until-the-user-not-clicked-to-the-another-tab-in-vuejs

Content Attribution

This content was originally published by Swati at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: