title: Add/Remove Class of a link with jQuery inside a nav ul li h4
body: <p>I have 5 a link items in a row, encapsulated within a h4 and the h4 within li element and the li within ul which it's finally nested in a nav element.</p>
  
  <p>At the moment, the role of a (thanks to a very helpful example that I found here) when clicked is to change the content of the divs (that contain images and text).</p>
  
  <p>What I would like to do in addition, is that when you click the link and the content changes, I would like a link to receive the "active" class, which has white color and certain other css attributes.</p>
  
  <pre><code>&lt;script&gt;      
    $(function() {
      $( "#tabs" ).tabs();
    }); 
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>the function that swaps the content</strong></p>
  
  <pre><code>&lt;nav id="nav2"&gt;       
    &lt;ul  class="tabz"&gt;
      &lt;li&gt;&lt;h4&gt;&lt;a href="#tabs-1" class="active"&gt;Szenario 1&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
      &lt;li&gt;&lt;h4&gt;&lt;a href="#tabs-2"&gt;Szenario 2&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
      &lt;li&gt;&lt;h4&gt;&lt;a href="#tabs-3"&gt;Szenario 3&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
      &lt;li&gt;&lt;h4&gt;&lt;a href="#tabs-4"&gt;Szenario 4&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
      &lt;li&gt;&lt;h4&gt;&lt;a href="#tabs-5"&gt;Szenario 5&lt;/a&gt;&lt;/h4&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>When the page loads, everything displays correctly. When I click the second link I would like the "active" class to be removed from first link and go to the sencond.
  (The css of the active class is just some color and border differences.)</p>
  
  <p>Thank you very much in advance.</p>