Question

我使用导航栏导航标签创建一个带有导航栏的长页面，点击导航标签打开各自的子导航栏（标签内容），导航内容锚点然后将您定向到某个位置页面并添加课程“活跃”。滚动时，还会添加激活类以显示页面上的当前位置。

我的问题是当我到达下一个导航标签的标签内容时，导航标签li应该变为活动状态并显示其标签内容，就像我实际点击标签一样。如何在滚动时激活导航标签的li？

为了表明我的问题，我做了一个jsfiddle： https://jsfiddle.net/Felirou/qLwcm15a/14/

如您所见，在滚动页面时，子菜单（tab-content）中的相应锚点将使用下面的jQuery激活。但是，当达到橙色/紫色时，导航选项卡不会变为活动状态，但是当您单击它时，您可以看到其内容已变为活动状态。

<!-- the navbar -->
<div class="row" id="navbar">  
  <ul class="nav nav-tabs">
    <li id="navbarPresentation" class="active"><a data-toggle="tab" href="#menu1">Green/Blue</a></li>
    <li id="navbarIntroduction"><a data-toggle="tab" href="#menu2">Orange/Purple</a>
 </ul>

<!-- This is the sub-menu of the header, the tab-content -->
  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
    <nav class="navbar-nav">
      <a class="nav-item nav-link" href="#green"><h5>green</h5></a>
      <a class="nav-item nav-link" href="#blue"><h5>blue</h5></a>
    </nav>
    </div>

    <div id="menu2" class="tab-pane fade">
    <nav class="navbar-nav">
      <a class="nav-item nav-link" href="#orange"><h5>orange</h5></a>
      <a class="nav-item nav-link" href="#purple"><h5>purple</h5></a>
    </nav>
    </div>
  </div>
</div>


// onScroll event for the sub nav also called the tab-content
  $(document).on("scroll", onScroll);
  function onScroll(event){
      var scrollPos = $(document).scrollTop();
    $('.tab-content a').each(function () {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
        $('.tab-content a').removeClass("active");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
  });
}

我尝试了很多不同的事情，所以我不确定哪个尝试发布失败。但我想我必须用parent（）或一些布尔值true / false做一些事情来向li添加一个类，但我似乎无法使它工作。有人可以帮助我或指出我正确的方向吗？

事先，非常感谢你！

Answer 1

我想你需要这样做：

let tabs = $('.tab-content a');
tabs.each(function(){
let self = this;

$(this).on('click',function(){
  removeActiveClass();
  $(self).addClass('active'); 
 });
});
function removeActiveClass(){
 tabs.each(function(){
  $(this).removeClass('active');
 });
}

你必须在所选的数组（＆＃39; .tab-content a＆＃39;）上进行循环，现在它只会突出显示活动链接，希望对此有所帮助。

检查 - ＆gt; codepen link

在滚动

1 个答案: