Change active link inside JavaScript include file

Question

I'm using JavaScript(JS) includes to render a tab menu in a few HTML pages. The JS includes are working fine - the tabs render. However, I would like to change the background color of the tab when the page is active. Does anyone know how to do this? All of my files are external files (ie external CSS and JS files).

The provided is a snippet of my code.

// JavaScript Document

document.write('<ul id="tabMenu">');
document.write('<li><a id="sbac" href="sbac_courses.html"><img src="../images/rlbm.png" width="149" height="52" /></a></li>');
document.write('<li><a id="nbm" href="nbm.html"><img src="../images/nbm.png" width="149" height="52" /></a></li>');
document.write('<li><a id="sbo" href="sbo.html"><img src="../images/sbo.png" width="149" height="52" /></a></li>');
document.write('</ul>');


switch (selected) {
        case 'sbac':
            $('ul li a').css('bgColor','#FCB314');
            break;
        case 'nbm':
            $('ul li a').css('bgColor','#FCB314');
            break;
        case 'sbo':
            $('ul li a').css('bgColor','#FCB314');
            break;
}

Answer 1

You may have to massage the pathname a bit but you could do something like

var page = location.pathname; //Parse this to get the page ex: nbm.html
$('#tabMenu [href="' + page + '"]').closest('li').css('background-color','#FCB314');

Your above code seems to not be working because you're using 'bgColor' instead of 'background-color'