選定的選項卡突出顯示，直到用戶未單擊 vuejs 中的另一個選項卡

Question

我需要突出顯示當前選項卡，直到用戶無法單擊下一個選項卡。 Hover 只能幫助突出顯示選項卡，但是一旦選擇了 hover 選項卡的任何其他內容，就會消失。

例如，我單擊類別選項卡，它會突出顯示，但一旦選擇類別內的任何產品，然后 hover 被刪除
誰能幫我怎么做？

<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>

Answer 1

即使您的路線中有孩子，下一個示例也有效。

我以您的類別為例。 您需要做的是檢查路線何時更改以及哪些路線處於活動狀態。 例如，如果您使用this.$routes.name或this.$routes.path $routes.path 您可以訪問當前路由名稱和當前路由路徑。 您需要做的就是驗證當前路線是否與導航選項卡匹配。

所以你的 HTML 應該是這樣的（你只需要使用與其他人相同的邏輯）

     <div :class="$route.path.includes('/categories') ? 'nav-highlight active' : '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>

您的 css：

    .nav-highlight{
      width: 25%;
    }
    .nav-highligth.active {
      background-color: rgb(194, 193, 193);
    }