Состояние фокусировки остается включенным после нажатия на навигационную ссылку при использовании Firefox (работает в Chrome)

Я пытаюсь создать навигацию на странице, используя классическую навигационную панель Bootstrap (3.2).

Я использую jQuery для реализации прокрутки до функциональности, а также удаления и добавления active класса к правильной вкладке.

Проблема При нажатии на ссылку навигации при использовании Firefox состояние фокусировки включено (отлично работает с Chrome).

Так выглядит, с нормальным активным состоянием:

И вот как это выглядит после того, как я нажал на Projects (он должен выглядеть как предыдущий, но похоже, что состояние фокусировки осталось):

Я воспроизвел это поведение в bootply.

1 ответ

Два решения:

1) изменение стилей фокусировки:

.my-navbar .navbar-brand:focus {
 color: whitesmoke;
 background-color: #7d93f3;
 text-shadow: 1em;
}

bootply

2) добавить важные для активных стилей классов.

он остановит цвет и цвет фона для переопределения в фокусе.

.my-navbar .navbar-nav > li.active > a {
 background-color: whitesmoke !important;
 color: #4***** !important;
}

bootply

licensed under cc by-sa 3.0 with attribution.