title: Showing content based on a nav link clicked
body: <p>I have a menu selection that looks like this:</p>
  
  <pre><code>&lt;ul class = "menu"&gt;
      &lt;li&gt;&lt;a href="#about" class="aboutNav"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact" class="contactNav"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#misc" class="miscNav"&gt;Misc&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm trying to make content associated with each of these links show on click and hide all other content. The JS I'm using looks as follows:</p>
  
  <pre><code>$('.menu li .aboutNav').click(function (e) {
     e.preventDefault();
     $('.wrapper').hide();
     $('.misc').hide();
     $('.contact').hide();
     $('.about').show();});
  </code></pre>
  
  <p>I want to have a function like this for each menu element, but currently it isn't working for all the elements in the menu. I've looked at other threads with the same problem I'm having but none of them seem to directly apply to the way I'm doing it. </p>
  
  <p>I just started learning html, js, css so I could be going about this the wrong way and that's why the other threads haven't really helped.</p>
  
  <p>EDIT: Here's a pastebin of all of my HTML <a href="http://pastebin.com/FjcNXGkY" rel="nofollow">http://pastebin.com/FjcNXGkY</a></p>