Tengo una selección de menú que se ve así:

<ul class = "menu">
    <li><a href="#about" class="aboutNav">About</a></li>
    <li><a href="#contact" class="contactNav">Contact</a></li>
    <li><a href="#misc" class="miscNav">Misc</a></li>
</ul>

Estoy tratando de hacer que el contenido asociado con cada uno de estos enlaces se muestre al hacer clic y ocultar todos los demás contenidos. El JS que estoy usando se ve de la siguiente manera:

$('.menu li .aboutNav').click(function (e) {
   e.preventDefault();
   $('.wrapper').hide();
   $('.misc').hide();
   $('.contact').hide();
   $('.about').show();});

Quiero tener una función como esta para cada elemento del menú, pero actualmente no funciona para todos los elementos del menú. He visto otros hilos con el mismo problema que tengo, pero ninguno de ellos parece aplicarse directamente a la forma en que lo estoy haciendo.

Acabo de empezar a aprender html, js, css para poder hacer esto de la manera incorrecta y es por eso que los otros hilos realmente no han ayudado.

EDITAR: Aquí hay un pastebin de todo mi HTMLhttp://pastebin.com/FjcNXGkY