vue导航栏选中高亮功能

最新推荐文章于 2024-05-27 11:29:33 发布

洋气的小呆瓜

最新推荐文章于 2024-05-27 11:29:33 发布

阅读量988

点赞数

分类专栏： Vue 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/m0_56565389/article/details/122360795

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<template>
<ul role="list" class="header-navigation">
            <router-link  :to="{path:'/home'}" >
              <li class="nav-item-wrapper"><a class="nav-link">Home</a></li>
            </router-link>

            <router-link  :to="{path:'/ido'}" >
              <li class="nav-item-wrapper"> <a class="nav-link">ido</a>
              </li>
            </router-link >

            <router-link  :to="{path:'/ido'}" >
              <li class="nav-item-wrapper"><a class="nav-link">invite</a>
              </li>
            </router-link >

            <router-link  :to="{path:'/about'}" >
              <li class="nav-item-wrapper"><a aria-current="page" class="nav-link-copy w--current">ABOUT
              MF</a></li>
            </router-link>

            <router-link  :to="{path:'/token'}" >
              <li class="nav-item-wrapper"><a class="nav-link">Tokenomics</a></li>
            </router-link>

            <router-link  :to="{path:'/team'}" >
               <li class="nav-item-wrapper"><a  class="nav-link">team</a>
               </li>
            </router-link >

            <router-link  :to="{path:'/airdrop'}" >
              <li class="nav-item-wrapper"><a class="nav-link">airdrop</a>
              </li>
            </router-link >
</template>

HTML 代码不全

<style  scoped>
a{
  text-decoration: none;
}
.router-link-active li a{
  color: #6639e4;
 border-bottom: 2px solid rgb(19, 31, 196) !important;
}
</style>

在css样式中 router-link-active 就能实现导航栏代码选中一直高亮啦