Javascript to highlight current nav and sub directories

I am using this script to highlight the current navigation link :

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();
}
开发者_开发问答

This works fine if I am at www.site.com/contact/ the contact link will have the active class. My question is how could I modify this so that also if I am in a subdirectory it continues to highlight that link? So if I am in contact/stuff/index.html then it would still have the active class on contact.

One thing you could do is add rel="pagname" to the anchor tags then have your extractPageName function actually extract the page name. As it is now it looks like extractPageName is supposed to return a value that matches with the anchor tag's href attribute.

Untested, but something to this effect...

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

Your top menu would then look like this (note the extra rel attribute)...

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

I have a strong feeling it has something to do with your return statement in extractPageName(hrefString). The URL is getting passed and converted into an array with x amount of elements, if the size is less than 2 you obviously just return the string passed, else you return the last two components of the URL. Thus when you try "contact/stuff/index.html" the array contains four elements and is only returning arr[n-2] + arr[n-1] which is "stuff" + "index.html" (and the contact part is lost). I'd suggest making a for loop that adds the to the array instead of restricting it to just the last two elements.