title: Why can't I change background of active navigation element?
body: <p>I'm trying to make my active navigation tab's background color turn to white, while the active hyperlink text should simultaneously change to black. 'Active' in this case means the current page the user is on.</p>
  
  <p>To do this I'm using jquery to add a class of .selected</p>
  
  <pre><code>$(document).ready(function () {
      $('.navbar a').each(function (index) {
          if (this.href.trim() == window.location) $(this).addClass("selected");
      });
  });
  </code></pre>
  
  <p>currently the css for each navigation element without the .selected class is: </p>
  
  <pre><code>.navbar a {
      color:#FFFFFF;
      padding:10px 10px 0 10px;
      margin-left:5px;
      margin-right:5px;
      background-color:#404040;
      border-radius: 10px 10px 0 0;
  }
  </code></pre>
  
  <p>and the css for the .selected class is: </p>
  
  <pre><code>.selected {
      background-color: #FFFFFF;
      color:#404040;
  }
  </code></pre>
  
  <p>However, it is not working. </p>
  
  <p>Here is my jsfiddle. </p>
  
  <p><a href="http://jsfiddle.net/m9YfG/1/" rel="nofollow">http://jsfiddle.net/m9YfG/1/</a></p>