Question

我有点困惑。我在使用bootstrap之前创建了多个页面网站，并且我在每个页面上都包含了导航栏标记，并将当前页面链接设置为.active类，以便我可以访问它并很好地突出显示它。

我现在正在开发一个单页网站，它有一个粘性（“固定”）导航栏。我已将其设置为使用jQuery滚动到页面下的特定部分，基于部分ID。但是，如何访问我目前所处的“当前”导航栏链接？

基本上，当我向下滚动页面时，我将浏览所有链接，我希望链接根据它所在的部分更改颜色。我是否需要使用jQuery来更改链接的类？或者bootstrap是否内置了这个内容？

Answer 1

我认为您正在寻找Bootstrap的Scrollspy。当当前滚动位置与页面上元素的id匹配时，它将在导航栏active元素中设置li类。

首先在BODY标签上设置Scrollspy。偏移量是固定导航栏的高度：

$('body').scrollspy({
  target: '#myNavbar',
  offset: 50
});

HTML：

 <div class="navbar-collapse collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-left">
       <li><a href="#section1">One</a></li>
       <li class="active"><a href="#section2">Two</a></li>
       <li><a href="#section3">Three</a></li>
       ..
    </ul>
 </div>   

 <div id="section1">Section One</div>
 <div id="section2">Section Two</div>
 <div id="section3">Section Three</div>

然后覆盖此CSS以更改.active链接颜色：

.navbar-nav li>a:hover,.navbar-nav li>a:focus,.navbar-nav li.active {
    background-color:#000;
}

示例：http://www.codeply.com/go/v1AEOlZMtC

根据页面上的位置更改bootstrap导航栏链接颜色

1 个答案: