Question

我使用了一个具有一些不错的滚动效果的模板（https://www.freshdesignweb.com/demo/template/ubusina/#carouselHacked），但是，我已经在ul的末尾添加了一个外部链接，它似乎有效 - 但它是导致错误！

当我滚动时出现此错误：

未捕获错误：语法错误，无法识别的表达式：http://mylink.com/blog/

我相信下面的JavaScipt代码的第一部分是它破坏的地方，但我不确定如何解决它：

 function onScroll(event){
          var scrollPos = $(document).scrollTop();
          $('.navbar-default .navbar-nav>li>a').each(function () {
              var currLink = $(this);
              var refElement = $(currLink.attr("href"));
              if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                  $('.navbar-default .navbar-nav>li>a').removeClass("active");
                  currLink.addClass("active");
              }
              else{
                  currLink.removeClass("active");
              }
          });
      }



      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a class="menu active" href="#home" title="Home" >Home</a></li>
            <li><a class="menu" href="#about">about </a></li>
            <li><a class="menu" href="#team" title="Portfolio">Portfolio</a></li>
            <li><a class="menu" href="#contact" title="Contact">contact</a></li>
            <li><a href="www.google.com" target="_blank" >google</a></li>
          </ul>
      </div>

Answer 1

我假设您使用的任何模板都希望您的菜单具有某种结构，例如应用于菜单中锚点的class属性。您添加的锚没有此属性。

尝试更改此内容：

 <li><a href="www.google.com" target="_blank" >google</a></li>

对此：

 <li><a class="menu" href="www.google.com" target="_blank">google</a></li>

Answer 2

问题是您的代码正在尝试使用href作为选择器来选择元素。 #home是一个有效的jQuery ID选择器，但www.google.com不是（顺便提一下，您可能需要https://www.google.com）。尝试过滤，只有那些以#开头的人才会被使用。

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.navbar-default .navbar-nav>li>a').each(function () {
        var currLink = $(this);
        // Only apply to those tags that start with '#'.
        var href = currLink.attr("href");
        if (href.indexOf('#') === 0) {
            var refElement = $(href);
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('.navbar-default .navbar-nav>li>a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        }
    });
}

我在我的ul中添加了一个li，虽然它有效但却导致错误

2 个答案: