У меня есть выбор меню, который выглядит следующим образом:

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

Я пытаюсь сделать так, чтобы контент, связанный с каждой из этих ссылок, показывался по клику и скрывал весь другой контент. Я использую JS выглядит следующим образом:

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

Я хочу иметь такую ​​функцию для каждого элемента меню, но в настоящее время она работает не для всех элементов меню. Я смотрел на другие темы с той же проблемой, что и у меня, но ни одна из них, похоже, не имеет прямого отношения к тому, как я это делаю.

Я только начал изучать html, js, css, чтобы я мог поступить неправильно, и поэтому другие потоки действительно не помогли.

РЕДАКТИРОВАТЬ: Вот вставить все мои HTMLhttp://pastebin.com/FjcNXGkY