title: Changing the state of an anchor to active via javascript or jquery
body: <p>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.</p>
  
  <pre><code>&lt;div class="grid__unit one-whole"&gt;
  &lt;nav role="navigation"&gt;
      &lt;ul id="nav--primary" class="navbar navbar--menu"&gt;
          &lt;li&gt;&lt;a class="navitem" href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="navitem" href="http://www.google.com"&gt;Google&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="navitem" id="myNavButton" href="myLink"&gt;myTitle&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p>with  css</p>
  
  <pre><code>a:hover, a:active {
  color: #b74800;
  }
  </code></pre>
  
  <p>and script </p>
  
  <pre><code>&lt;script&gt;    
  $(document).ready(function () {        
      $("#myNavButton").addClass("active");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>EDIT 1:</p>
  
  <p>I have tried adding an a.active tag to the css and script as follows, with no success.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      var path = location.pathname.length ? location.pathname : window.location.href;
      $('.active').removeClass('active');
      $("#nav--primary").find('a[href*="' + path + '"]').addClass("active");
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>with css</p>
  
  <pre><code>a:hover, a:active, a.active {
  color: #b74800;
  }
  </code></pre>
  
  <p>EDIT 2 --SOLVED</p>