title: jQuery: Same Level remove class
body: <p>I have a navigation with 3 levels. If you click on one of the links it gets a class name depending on  the level. Level 1 will have a class name "active1", level 2 "active2", level 3 "active3".</p>
  
  <p>I manage to get the class name when clicked on, however the other class names get deleted as soon the on get clicked.</p>
  
  <p>The Plan is.. if I click a link in the first Level the second Level will be shown and if I click a link in the second Level the third Level will be shown.</p>
  
  <p>How can I solve this problem? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;ul class="first"&gt;
      &lt;li&gt;&lt;a href="#" title="Nav" class="active"&gt;Link&lt;/a&gt;
          &lt;ul class="second"&gt;
              &lt;li&gt;&lt;a href="#" title="Sub Nav"&gt;Link 2&lt;/a&gt;
                  &lt;ul class="third"&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub Nav 2"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub Nav 2"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Sub Nav"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Sub Nav"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Nav"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Nav"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" title="Nav"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS/jQuery</p>
  
  <pre><code>$('.first a').click(function() {
      if ($(this).hasClass('active')) {
          return false;
      } else if ($(this).not('active')) {
          $('.first').find('.active').removeClass('active');
          $(this).addClass('active');
      }
      return false;
  });
  
  $('.second a').click(function() {
      if ($(this).hasClass('active2')) {
          return false;
      } else if ($(this).not('active2')) {
          $('.second').find('.active2').removeClass('active2');
          $(this).addClass('active2');
      }
      return false;
  });
  
  $('.third a').click(function() {
      if ($(this).hasClass('active3')) {
          return false;
      } else if ($(this).not('active3')) {
          $('.second').find('.active3').removeClass('active3');
          $(this).addClass('active3');
      }
      return false;
  });
  </code></pre>