スクロールでnav-tabs liをアクティブにするクラスを追加する

Question

私は、ブートストラップnav-tabを使ってnavbarで長いページを作成し、nav-tabsをクリックすると、それぞれのサブナビゲーションバー（タブコンテンツ）、nav-contentアンカーはページの特定の位置にあなたを誘導し、 'アクティブ'クラスを追加します。スクロールすると、クラスのアクティブも追加され、ページ上の現在の位置が表示されます。

私の問題は、次のナビゲーションタブのタブコンテンツに到達するときに、ナビタブリがアクティブになり、物理的にタブをクリックしたときと同じようにタブコンテンツが表示されるはずです。スクロール時にnav-tabsの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"); 
    } 
    }); 
} 

私はいくつかのことを試してみましたが、どの投稿に失敗したのか分かりません。しかし、私は、liにクラスを追加するために、parent（）またはboolean true/falseを使って何かをしなければならないと思っていますが、動作させることができません。誰かが私を助けたり正しい方向に私を向けることができますか？

事前に、本当にありがとうございます！

Answer 1

私はuがこれを実行する必要があると思う：

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-コンテンツA」）の選択されたアレイ上のループを作るために持っているが、今それが唯一のアクティブなリンクをハイライト表示されますのみ、このヘルプホープ。

チェック - >codepen link