jQuery頁面導航 - 在新頁面的一節中設置活動類

我的客戶請求我包含部分頁面導航，下面的代碼會回答。如果用戶觸發內部頁面鏈接，或者使用分段導航（.menu），則分段導航的狀態將變爲class .active，然後將用戶帶到其選擇的部分。它可能不漂亮，但它很簡單，它的工作原理。jQuery頁面導航 - 在新頁面的一節中設置活動類

當用戶選擇指向另一頁上特定部分的鏈接時，就會遇到困難。

我無法弄清楚如何將新頁面上的相關分區導航設置爲class .active。

我在想，在onload時，我需要從頁面href中刪除#newsection，然後運行一個類似的查詢，如圖所示？

我正在尋找指導，以達到我的目標，甚至更好的方法的最佳方法。

任何接受者？

我使用的是jQuery，該網站是html和.aspx頁面的混合體。

謝謝。

$(document).ready(function() { 

function scrollitanchors(target) { 

    if (target != "") { 
     var stop = $(target).offset().top; 
     var delay = 900; 
     $('body,html').animate({ scrollTop: stop }, delay); 
     return false; 
    } 
} 

$('.scrollit').on('click', function (e) { 
    e.preventDefault(); 
    var target = $(this).attr('href'); 

    $('.menu li a').each(function() { 
     $(this).removeClass('active'); 
    }); 

    $('.menu li a').each(function() { 

     if ($(this).attr('href') == target) { 
      $(this).addClass('active'); 
     } 
    }); 
    scrollitanchors(target); 
}); //eo function

}）; // e.o doc準備就緒

來源

2016-07-11 RayH1066

所以鏈接是在不同頁面上的一個部分，但是一旦新頁面被加載，該鏈接需要保留活動類？ –

是的。感謝您提出問題 - .active課程當然適用於新的「部分」。第1頁上的示例視圖項目向下滾動，在特定項目下面閱讀更多內容會打開一個新頁面，並且用戶將滾動到該部分。我想將頁面導航標記爲該部分的活動狀態。 – RayH1066

下面是如何用更少的代碼解決它：https：//jsfiddle.net/ono3tr0d/編輯：啊，我錯過了它是一個*新*頁。使用URL發送活動部分。 – Tibbelit

您可以將字符串添加到第二頁的url的哈希值。

即：

<a href="/other/page#section>Link Text</a>

，並在第二頁上：

<a id="section">Link Text</a>

然後，當您加載新的頁面，檢查哈希值。

$(document).ready(function(){ 
    // Get the hash from the url 
    var section = window.location.hash; 
    // Check if the element with the id in the hash exists and add the active class 
    if ($("#" + hash).length) $("#" + hash).addClass('active'); 
    // Clean up the url 
    window.location.hash = ''; 
});

我不是100％清楚你要問什麼，但是這可以讓你傳遞頁面之間的鏈接ID。

來源

2016-07-11 22:38:33

＃西南。謝謝。這看起來像我的答案 - 我需要從URL中刪除#section，然後在上面的函數中使用它作爲目標。輝煌。我沒有測試過，但它看起來正是我需要的。我會在早上測試它，然後返回來標記它作爲答案。再次感謝。來自英國的晚安.. – RayH1066

[http://www.rws-demo.uk/plugin_demo/aa-is-vis-1。html]作爲最後的評論 - 我問的問題是一個更大的想法的一部分。客戶想要一個固定的頁面導航系統，告訴用戶他們滾動的位置和滾動的主動類更新。我無法找到一種方法，所以我試圖寫我自己的 - 希望你可以使用鏈接查看它。滾動到頂部時，導航欄也位於標題下方。如果您想提供改進建議，那麼網頁上有一個電子郵件地址。 – RayH1066

jQuery頁面導航 - 在新頁面的一節中設置活動類

回答

相關問題