Bootstrap Scrollspy：删除框突出显示。只有文字

Question

（我在这个上使用 bootstrap 3.3.7）

嗨。我想对我的 bootstrap 导航栏产生影响，即在用户所在的任何部分（我在我的单页网站上使用标签），只需滚动即可自动突出显示导航栏中的文本。我已经设置了落锚 links...

body 标签有了这个额外的属性，到目前为止效果很好

<body data-spy="scroll" data-target=".navbar-collapse">

...但是有一个问题。我只希望导航栏中的文本看起来很活跃，突出显示。但是正如您在图片（上面的示例）中看到的那样，现在在突出显示的导航栏 link 周围有一个类似的框。它不知从何而来。我怎样才能摆脱它，所以当它处于活动状态时只有文本颜色稍微浅一点？ Look on the image here. The upper example is the problem now, and the bottom one is how I would like it, but with using scrollspy. So not that black box.

提前问候并感谢我的朋友们

Answer 1

您需要将 <a> 标签的活动状态更改为背景 none。当您使用 scrollspy 滚动时，Bootstrap 将 active 的 class 添加到包含 link 的 li。所以它会像下面这样：

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
  background:none;
}

在上面的示例中，我也包括了悬停和焦点状态，但如果您想更改这些状态，您也可以通过图像中的颜色自行更改，我假设您使用的是 navbar-inverse如果您使用的是 navbar-default 之类的其他内容，则必须相应地进行更改。

Bootstrap Scrollspy：删除框突出显示。只有文字

Bootstrap Scrollspy: Remove Box Highlighting. Only Text

html

css

navbar

twitter-bootstrap

scrollspy