Javascript功能來突出當前的資產淨值和子目錄

Question

我使用這個腳本高亮顯示當前導航鏈接：

function extractPageName(hrefString) 
{ 
    var arr = hrefString.split('/'); 
    return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase(); 
} 

function setActiveMenu(arr, crtPage) 
{ 
    for (var i=0; i < arr.length; i++) 
    { 
     if(extractPageName(arr[i].href) == crtPage) 
     { 
      if (arr[i].parentNode.tagName != "DIV") 
      { 
       arr[i].className = "active"; 
       arr[i].parentNode.className = "active"; 
      } 
     } 
    } 
} 

function setPage() 
{ 
    hrefString = document.location.href ? document.location.href : document.location; 
    if (document.getElementById("topNav") !=null) 
    setActiveMenu(document.getElementById("topNav").getElementsByTagName("a"), extractPageName(hrefString)); 
} 

window.onload=function() 
{ 
    setPage(); 
} 

如果我在www.site.com/contact/接觸環節都會有這樣的工作正常活躍的班級。我的問題是我怎麼能修改這個，以便如果我在一個子目錄中，它仍然強調這個鏈接？所以，如果我聯繫/ stuff/index.html，那麼它仍然會有聯繫上的主動類。

Answer 1

我有一種強烈的感覺，它與extractPageName（hrefString）中的return語句有關。如果URL的大小小於2，那麼URL將被傳遞並轉換爲一個包含x個元素的數組，否則顯然只返回傳遞的字符串，否則返回URL的最後兩個組件。因此，當您嘗試「contact/stuff/index.html」時，數組包含四個元素，並且僅返回爲「stuff」+「index.html」的arr [n-2] + arr [n-1]（以及聯繫人部分丟失）。我建議做一個for循環，將其添加到數組中，而不是將其限制爲最後兩個元素。

Answer 2

你可以做的一件事是將rel =「pagname」添加到錨標記，然後讓你的extractPageName函數實際提取頁面名稱。現在看起來extractPageName應該返回一個與錨標記的href屬性匹配的值。

未經檢驗的事，但這種效果......然後

function extractFirstDir(hrefString) 
{ 
    return hrefString.replace('://', '').split('/')[1]; 
} 

function setActiveMenu(arr, crtPage) 
{ 
    for (var i=0; i < arr.length; i++) 
    { 
     if(arr[i].rel == crtPage) 
     { 
      if (arr[i].parentNode.tagName != "DIV") 
      { 
       arr[i].className = "active"; 
       arr[i].parentNode.className = "active"; 
      } 
     } 
    } 
} 

function setPage() 
{ 
    var hrefString = document.location.href || document.location; 
    if (document.getElementById("topNav") != null) { 
     setActiveMenu(document.getElementById("topNav").getElementsByTagName("a"), extractFirstDir(hrefString)); 
    } 
} 

window.onload=function() 
{ 
    setPage(); 
} 

您的頂部菜單是這樣的（注意額外的屬性rel）...

<div id="topMenu"> 
    <a href="/contact" rel="contact">Contact</a> 
</div>