在 Bootstrap 中添加滚动时导航链接不活动

Question

首先我需要说我对 html/css 很陌生，并且对 js 和 jquery 知之甚少。

现在我的问题。我正在用 Bootstrap 完成一个网站，它有不同的容器可以向下滚动。我寻找了一个滚动 js 代码，它运行良好，但问题是导航链接不再活跃。我尝试过使用不同的滚动脚本和解决方案，但根据我的实际知识，我无法弄清楚如何解决它。同样，除了没有激活导航链接之外，该脚本工作正常，没有它，网络也能正常工作。

这是我的导航 html：

<div class="navbar navbar-inverse navbar-fixed-top" id="navigation">
  <div class="navbar-inner">
    <div class="container-fluid">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span><i class="icon-reorder"></i></span>
      </button>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active">
          <a href="#tebamar" title="tebamar" class="scroll-page"><i class="icon-home icon-white"></i> Tebamar</a>
          </li>
          <li class="#">
          <a href="#quien" title="quien" class="scroll-page"><i class="icon-group icon-white"></i> Nosotros</a>
          </li>
          <li>
            <a href="#que" title="que" class="scroll-page"><i class="icon-th icon-white"></i> Qué hacemos</a>
          </li>
          <li>
            <a href="#donde" title="donde" class="scroll-page"><i class="icon-map-marker icon-white"></i> Dónde</a>
          </li>
          <li>
            <a href="#como" title="como" class="scroll-page"><i class="icon-briefcase icon-white"></i> Cómo</a>
          </li>
          <li>
            <a href="#contacto" title="contacto" class="scroll-page"><i class="icon-envelope-alt icon-white"></i> Contacto</a>
          </li>
        </ul></div></div></div></div>

这是我正在使用的脚本：

<script>
$(document).ready(function() {
// Smooth animation when page scrolls
$("a.scroll-page").scrollToSection()

/* Initialise Carausel */
$('.carousel').carousel();

/* Initialise Tooltip */
$('[rel="tooltip"]').tooltip(); 

 });


jQuery.fn.scrollToSection = function(settings) {

settings = jQuery.extend({
    speed : 1000
}, settings);   

return this.each(function(){
    var caller = this
    $(caller).click(function (event) {  
        event.preventDefault()
        var locationHref = window.location.href
        var elementClick = $(caller).attr("href")

        var destination = $(elementClick).offset().top;
        if(elementClick == "#home"){
            destination = 0;
        }
        $("html:not(:animated),body:not(:animated)").animate({ scrollTop:  destination}, settings.speed, function() {
            window.location.hash = elementClick;
        });
        return false;
    })
})
}

Answer 1

我不确定您究竟想在这里做什么，但要使导航链接处于活动状态，您可以使用类似这样的东西 (http://jsfiddle.net/wcRJQ/4/)：

$(".nav li").each(function()
{
    $(this).click(function(e) 
    {
        $(".nav .active").removeClass("active");
        $(this).addClass("active");
    })
});