Eu tenho uma seleção de menu que se parece com isso:

<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>

Estou tentando fazer com que o conteúdo associado a cada um desses links seja exibido ao clicar e ocultar todos os outros conteúdos. O JS que estou usando tem a seguinte aparência:

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

Eu quero ter uma função como esta para cada elemento do menu, mas atualmente não está funcionando para todos os elementos no menu. Eu olhei para outros threads com o mesmo problema que estou tendo, mas nenhum deles parece se aplicar diretamente à maneira como estou fazendo isso.

Eu apenas comecei a aprender html, js, css para que eu pudesse fazer isso da maneira errada e é por isso que os outros threads realmente não ajudaram.

EDIT: Aqui está uma pasta de todo o meu HTMLhttp://pastebin.com/FjcNXGkY