使用 Firefox 时单击导航栏链接后焦点状态保持打开（适用于 Chrome）

Question

我正在尝试使用Bootstrap (3.2) 的经典导航栏创建页内导航。

我正在使用jQuery 来实现滚动到功能，并将active 类删除并添加到正确的选项卡中。

问题
在使用 Firefox 时单击导航栏链接时，焦点状态为开启（适用于 Chrome）。

这是它的外观，处于正常活动状态：

这就是我点击项目后的样子（它应该看起来像上一个，但看起来焦点状态是保持打开）：

我在bootply 中重现了这种行为。

Answer 1

两种解决方案：

1)焦点样式的改变：

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

bootply

2) 将 !important 添加到活动类样式中。

它将停止颜色和背景颜色在焦点上被覆盖。

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

bootply