Ich habe eine Menüauswahl, die so aussieht:

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

Ich versuche, die mit diesen Links verknüpften Inhalte beim Klicken anzuzeigen und alle anderen Inhalte auszublenden. Das JS, das ich verwende, sieht folgendermaßen aus:

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

Ich möchte eine solche Funktion für jedes Menüelement haben, aber derzeit funktioniert sie nicht für alle Elemente im Menü. Ich habe mir andere Threads mit demselben Problem angesehen, aber keines davon scheint direkt auf die Art und Weise zuzutreffen, wie ich es tue.

Ich habe gerade angefangen, HTML, JS, CSS zu lernen, also könnte ich das falsch machen, und deshalb haben die anderen Threads nicht wirklich geholfen.

EDIT: Hier ist ein Pastebin von all meinem HTMLhttp: //pastebin.com/FjcNXGk