Search code examples
jqueryvariablesnavpathname

if nav link matches page_id change color


ok so heres my nav setup

<div id="headerMenu">
            <ul>  
                <li style="width:147px"><a href="/?page_id=92" class="menuHov"><span>ABOUT<br/>ABOUT</span></a></li>
                <li style="width:186px"><a href="/?page_id=64" class="menuHov"><span>STOCKISTS<br/>STOCKISTS</span></a></li>
                <li style="width:146px"><a href="/?page_id=96" class="menuHov"><span>PRESS<br/>PRESS</span></a></li>
                <li style="width:128px"><a href="/?category_name=blogs" class="menuHov"><span>BLOG<br/>BLOG</span></a></li>
                <li style="width:70px"><a href="/?page_id=89 " class="menuHov"><span>CONTACT<br/>CONTACT</span></a></li>
            </ul>

i need a jquery script to recognize the page_id variable and the href and if they're the same, change color... let me know if you need anymore info...

heres what i tried so far.

 $(document).ready(function() {
    $('a.menuHov[href$=' + window.location.pathname + ']').css('color', '#fae349');
});

but that changes everything because i guess it doesn't recognize the href as a pathname


Solution

  • $(function(){
        var page_id = getParameterByName("page_id");
        $("a.menuHov[href$=" + page_id + "]").css('color', '#fae349');
    })
    

    Include the query string parser from here

    function getParameterByName( name )
    {
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
        return "";
      else
        return decodeURIComponent(results[1].replace(/\+/g, " "));
    }