Bootstrap 4 Custom NavBar для активного состояния элемента - PullRequest
Новая
       8

Bootstrap 4 Custom NavBar для активного состояния элемента

0 голосов
/ 02 мая 2020

Я знаю, как добавить навигационную панель на страницу. Однако я борюсь с активным состоянием. Когда элемент активен (я на этой странице) или завис над элементом навигации, go от элемента к [элементу] также подчеркивается. Поэтому мне нужно знать, как добавить состояние активного и наведения, которое подчеркивает элемент и добавляет вокруг него эти скобки.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 02 мая 2020

Спасибо за ваш вопрос и добро пожаловать в сообщество. В будущем, пожалуйста, поделитесь кодом, который вы придумали, чтобы другие могли использовать его для изучения:).

Что касается вашей проблемы, просто используйте активный класс в CSS, чтобы изменить состояние вашей навигации. вещь.

Чтобы определить, на какой странице вы находитесь, потребуется язык. Вы можете использовать PHP, см. Этот существующий пост Как установить текущую страницу "активной" в php

Надеюсь, это поможет

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

CSS

.nav-item {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Style the active class (and on mouse-over) */
.active, .nav-item:hover {
  background-color: #666;
  color: white;
}
0 голосов
/ 02 мая 2020

хотя ваше описание довольно расплывчато, я думаю, что понимаю, что вы пытаетесь сделать. Я предполагаю, что когда вы нажимаете кнопку навигационной панели, вы переходите на другую страницу.

Если вы хотите, чтобы «nav-item» отображался активным, вы просто должны присвоить ему класс «active» 

<li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

В случае изменения элемента на [item], вы можете сделать это с помощью CSS: 

.example:before {
    content: "item";
}

.example:hover:before {
    content: "[item]";
}

Хотя использование этого метода требует, чтобы в ссылке не было текста, в противном случае вы в итоге будет отображаться «item [item]».

Надеюсь, это помогло. Чтобы узнать больше о загрузочных панелях, проверьте здесь: https://getbootstrap.com/docs/4.0/components/navbar/

...