添加活动的类到导航列表里滚动

我创建一个带有导航栏的长页面，使用引导nav-tabs，点击导航栏打开它们各自的子导航栏（tab-content），导航内容然后锚点将您引导至页面的某个位置并添加“活动”类。在滚动时，也会添加活动类以显示页面上的当前位置。添加活动的类到导航列表里滚动

我的问题是，当我到达下一个导航选项卡的标签内容时，导航列表li应该变为活动状态并显示其标签内容，就像当我物理单击选项卡时一样。如何使滚动条上的导航标签页激活？

为了显示我的问题，我已经做了的jsfiddle： https://jsfiddle.net/Felirou/qLwcm15a/14/

正如你可以看到，滚动页面时，子菜单中的相应的锚（标签内容）使用下面的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添加一个类，但我似乎无法使它工作。有人能帮助我或指出我的方向吗？

提前，非常感谢！

来源

2017-08-13 Felirou

你可以请张贴html。有关未来的问题，请关注[如何创建最小，完整和可验证示例]（https://stackoverflow.com/help/mcve）。 –

我把它清理了一下，并添加了一个jsfiddle，这将做的HTML所要求？ :-) – Felirou

我认为ü需要这样做：

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'); 
}); 
}

你必须做出的选择阵列（“.TAB-内容”）上的循环，现在它只会突出活动链接只希望这有助于。

检查 - >codepen link

来源

2017-08-13 13:16:48

谢谢你如此快速的回应。嗯，我想也许我没有很好地解释我的问题。我做了一个jsfiddle，也许你可以看到我的意思。它不是那么干净，但希望你能在滚动文档时看到我的意思。 https://jsfiddle.net/Felirou/qLwcm15a/4/ – Felirou

现在再次检查它是你想要什么https://jsfiddle.net/qLwcm15a/6/ –

我删除了一些不必要的东西，我只是链接我滚动时没有发生任何事情。我提供标签内容a的链接在滚动时变得活跃，但是我希望他们各自的li导航标签在到达时变为活动状态 – Felirou

添加活动的类到导航列表里滚动

回答

相关问题