在引导程序中添加滚动时导航链接不活动



首先,我需要说我对HTML/CSS非常新,并且很少知道JS和JQuery。

现在我的问题。我正在用Bootstrap完成一个网站,它的容器不同,可以向下滚动。我寻找了滚动JS代码,它运行良好,但问题是导航链接不再活跃。我已经尝试使用不同的滚动脚本和解决方案,但是凭借我的实际知识,我不知道如何解决它。同样,该脚本除了没有使NAV链接活动活动之外,脚本还不错,并且网络也可以正常工作。

这是我的导航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;
    })
})
}

我不确定您在这里要做什么,但是要使导航链接活动,您可以使用类似的东西(http://jsfiddle.net.net/wcrjq/4/):

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

相关内容

  • 没有找到相关文章

最新更新