Пункт меню активной панели навигации CSS3 / HTML5

Question

У меня сейчас есть:

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>

Моя цельдля каждого элемента меню, чтобы затенить другой цвет, когда страница активна.Я пробовал множество способов исправить это, но я не могу заставить это работать.в моем CSS у меня даже есть элемент element для: focus, но он работает только когда href = "#", а не с моей текущей настройкой.Что я здесь не так делаю?

Answer 1

Получилось работать с двумя изменениями:

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

Как я и предложил в своем комментарии, используйте *= как "содержит", а не ~= ("содержит слово"), и я думаю, что выхотел добавить класс active к <li/>, а не к тегу <a/>.