Question

I’m trying to highlight a navigational button (in a menu) based on the page being viewed. Here is what I have so far:

var loca = String(document.location.href);

// Get document location and specific page.
if (loca) {
    if(loca.search(RegExp("((/[\w]*)\.php)")) != -1) {
        activate(loca.match(RegExp("((/[\w]*)\.php)").split("/").join("")));
    } else {
        activate("home");
    }
}

// Activate a button
function activate(bName) {
    $(".button[name=" + bName + "]").css({
        "border-left": "1px solid white",
        "border-right": "1px solid white"
    });
}

What I want to happen is this:

1. Get URL of page
2. Get the specific file name of page, and if not found, then we are on the homepage.
3. Using jQuery, I try to find the name of the button, and if the name matches the filename, then highlight it.

Thing is, this only highlights the “Home” button. What am I doing wrong? Also, if you have any suggestions on how I can better accomplish this, please let me know!

Answer 1

I would get the filename like this, instead:

var pathname = window.location.pathname.split("/");
var filename = pathname[pathname.length-1].split(".")[0];

alert(filename);