jquery nav menu not marking current page when click on sub menu

Question

here is my jsfiddle: http://jsfiddle.net/HhBEJ/3/

Despite some of the code not looking good in jsfiddle because i have background images and such - I am having a problem with my nav menu. What I want it to do is:

When I load the page(index.htm) I want it to have a page marker ( which i have named current) to mark that I'm currently on the home page. When I click on another page to navigate to - I want it to remove current from prev page and make curPage the new current (you can see I did this in jquery (i think i did it right)) and if i click on a sub menu. for instance i go to "web > web215 > JavaScript" when I click on javaScript I want the Web parent Web215 child AND the javaScript grandchild to highlight all with the 'current' id. but it's not doing it to any of them except for a quick second when i click - it's not saving it when the page loads. I think the culprit is somewhere in here:

function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/') + 1);
$('a').each(function () {
    if ($(this).attr('href') == curPage) {
        $(this).attr('id', 'current');
    } else if (curPage == '') {
        $('a:first').attr('id', 'current');
    }
}); //END function

I know when i put an alert it's calling the page correctly and it's working as intended but the current class isn't either A: staying after it loads or B: loading up at all.

Answer 1

your css is wrong, you are setting the id of current to the a tag but in the css you are setting the id of current to the li tag. This is what you need:

div#menu li a#current {
 font-weight: bold;
 font-size: 16px;
 z-index: 6;
 background: transparent url('../images/menu_level1_item.png') repeat-x scroll 0pt 100%;
}
div#menu li a#current ul {
 font-weight: normal;
 font-size: 12px;
}