Active Nav Bar Menu Item CSS3 /HTML5

Question

I currently have this:

jQuery:

jQuery(document).ready( function(){
    var thispage = location.pathname.substring(1);
    //document.write(thispage);
    jQuery('#menu li a[href~="'+ thispage + '"]') // ~= is contains. Tweak as needed.
    .addClass('active');
});

CSS:

li.active {
    background-color: yellow;
}

HTML:

<nav id="topNav">
    <ul id="menu">
      <li><a href="<?=HOST?>/index.php" title="Home">HOME</a></li>
      <li><a href="<?=HOST?>/about-us/" title="About Us">ABOUT US</a></li>
      <li><a href="<?=HOST?>/technology/" title=" Technology"> TECHNOLOGY</a></li>
      <li><a href="<?=HOST?>/careers/" title="Careers">CAREERS</a>
      <li><a href="<?=HOST?>/blogs/" title="Blogs">BLOG</a>
        <!--<ul>                    
            <li style="background-color:#898486;"><a href="<?=SEEKER_HOST?>/opportunities" title="Current Opportunities">OPPORTUNITIES</a></li>
        </ul>-->
      <li class="last"><a href="<?=SEEKER_HOST?>/contact/index.php" title="Contact Us">CONTACT US</a></li>
    </ul>
</nav>

My goal is to each menu item to shade a different color when the page is active. I have tried numerous ways to fix this but I am unable to get this to work. in my CSS i even have an element item for :focus, but it only works when the href="#" and not with my current setup. What am I doing wrong here?

Answer 1

Got it to work with two changes:

jQuery('#menu li a[href*="'+ thispage + '"]').parent().addClass('active');

As I suggested in my comment use *= as "contains", not ~= ("contains word"), and I think you wanted to add the active class to the <li/> , not the <a/> tag.