Как настроить элемент nav-item только на моей активной странице? - PullRequest
Новая
       1

Как настроить элемент nav-item только на моей активной странице?

0 голосов
/ 01 апреля 2020

Я новичок в Vue. js и Nuxt, и я хочу, чтобы мой фоновый рисунок (синяя линия сверху элементов) только на моей активной странице (например, странице контактов)

image nav-item elements">

это мой HTML код: 

<b-navbar-nav class="text">
    <b-nav-item to="/">ACCUEIL</b-nav-item>
    <b-nav-item href="/#">ARTICLES</b-nav-item>
    <b-nav-item href="#">CARTE</b-nav-item>
    <b-nav-item to="/about">L'ÉQUIPE</b-nav-item>
    <b-nav-item to="/contact">CONTACT</b-nav-item>
  </b-navbar-nav>

и мой CSS:

css code

любая помощь, пожалуйста?

1 Ответ

0 голосов
/ 01 апреля 2020

Вы можете использовать класс nuxt-link-active для установки стилей изображения для активного элемента навигации вместо nav-link, который будет применять его ко всем элементам навигации.

nuxt-link-active применяется по умолчанию при использовании Nuxt. js. Вы даже можете установить собственный класс CSS, который будет применяться для активной навигации. Подробнее об этом вы можете прочитать в документации здесь .

...