添加活動的類到導航列表裏滾動

我創建一個帶有導航欄的長頁面，使用引導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

添加活動的類到導航列表裏滾動

回答

相關問題