Im having an issue getting the state of an anchor tag to be active. Say I am on the home page, I want the home navigation link to have an active state so it has a different color. Here is what im doing at the moment. I am referencing jquery. I have stubbed in alerts to make sure my script is getting hit. Here is what I last tried.

<div class=grid__unit one-whole>

<nav role=navigation>

    <ul id=nav--primary class=navbar navbar--menu>

        <li><a class=navitem href=#>Link</a></li>

        <li><a class=navitem href=http://www.google.com>Google</a></li>

        <li><a class=navitem id=myNavButton href=myLink>myTitle</a></li>

    </ul>

</nav>

with css

a:hover, a:active {

color: #b74800;

}

and script

<script>    

$(document).ready(function () {        

    $(#myNavButton).addClass(active);

});

</script>

EDIT 1:

I have tried adding an a.active tag to the css and script as follows, with no success.

<script>

$(document).ready(function () {

    var path = location.pathname.length ? location.pathname : window.location.href;

    $('.active').removeClass('active');

    $(#nav--primary).find('a[href*=' + path + ']').addClass(active);

});

</script>

with css

a:hover, a:active, a.active {

color: #b74800;

}

EDIT 2 --SOLVED