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

时间:2015-03-26 06:17:50

标签: javascript jquery html css twitter-bootstrap

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

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

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

1 个答案:

答案 0 :(得分: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