title: How to change colour of nav bar when on a certain page?
body: <p>I've got a navigation bar on a website and I want the page name to change colour when I am on that certain page, so that when i then click another page, it goes back to it's original colour and the new page selected will change colour.</p>
  
  <p>I looked around for a while trying to get it to work and all I could get was it to change colour when i clicked it, then the page loaded and it went back to it's original colour.</p>
  
  <p>List:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="navigation"&gt;
          &lt;li&gt;&lt;a href="pages/page1.html" title="Page One"&gt;Page One&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/page2.html" title="Page Two"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="pages/page3.html" title="Page Three"&gt;Page Three&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navigation .active {
  background-color: #CF5C3F;
  }
  
  .navigation li { 
  
  float:left; border-right:1px solid #5d5d5d; 
  border-left:1px solid #929292;
  width: 268px; 
  height: 34px; 
  border-bottom:1px solid #575757; 
  border-top:1px solid #797979;
  background-color:#5f5f5f;
  }
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$('.navigation a').click(function(){
      $(this).addClass('active').siblings().removeClass('active');
      });
  </code></pre>
  
  <p>Does anyone know what is wrong? it's really annoying me.</p>