title: JQuery function doesn't fire on first click, but behaves as expected on all subsequent clicks
body: <p>I simply need the selected link to show as selected and to show the indicated div while hiding the other two. Here's the jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/HZ4CZ/1/" rel="nofollow">http://jsfiddle.net/HZ4CZ/1/</a></p>
  
  <p>Why is it not working the first click, but working every click after that?</p>
  
  <pre><code>$(document).ready(function() {
      $('ul#chooseType li a').click(function(e) {   
          $('#active').click(function(){
              $('.activeDiv').removeClass('show_hide');
              $('.inactiveDiv').addClass('show_hide');
              $('.thirdMenuDiv').addClass('show_hide');
              $('#active').addClass('selected');
              $('#inactive').removeClass('selected');
              $('#thirdMenu').removeClass('selected');
          });
          $('#inactive').click(function(){
              $('.activeDiv').addClass('show_hide');
              $('.inactiveDiv').removeClass('show_hide');
              $('.thirdMenuDiv').addClass('show_hide');
              $('#active').removeClass('selected');
              $('#inactive').addClass('selected');
              $('#thirdMenu').removeClass('selected');
          });
          $('#thirdMenu').click(function(){
              $('.activeDiv').addClass('show_hide');
              $('.inactiveDiv').addClass('show_hide');
              $('.thirdMenuDiv').removeClass('show_hide');
              $('#active').removeClass('selected');
              $('#inactive').removeClass('selected');
              $('#thirdMenu').addClass('selected');
          });
  
      });
  });
  </code></pre>