Javascript突出显示当前导航和子目录

我使用此脚本突出显示当前导航链接：

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

函数extractPageName（hrefString）
{
var arr=hrefString.split（'/'）；
返回（arr.length<2）？hrefString:arr[arr.length-2].toLowerCase（）+arr[arr.length-1].toLowerCase（）；
}
功能设置活动菜单（arr、CRT页面）
{
对于（变量i=0；i

---

如果我访问www.site.com/contact/联系人链接将具有活动类，则此功能可以正常工作。我的问题是，我如何修改它，以便如果我在子目录中，它也会继续突出显示该链接？因此，如果我在contact/stuff/index.html中，那么contact上仍然会有活动类。

我强烈感觉它与extractPageName（hrefString）中的return语句有关。URL将被传递并转换为一个包含x个元素的数组，如果大小小于2，则显然只返回传递的字符串，否则返回URL的最后两个组件。因此，当您尝试“contact/stuff/index.html”时，数组包含四个元素，并且只返回arr[n-2]+arr[n-1]，即“stuff”+“index.html”（联系人部分丢失）。我建议创建一个for循环，将添加到数组中，而不是仅限于最后两个元素。

可以做的一件事是将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();
}

---

酷，谢谢你！这看起来是个好主意，我会试一试，让你知道结果如何。

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