Почему jQuery fadeIn и fadeOut не работают, когда я нажимаю кнопку навигации?

Question

Содержимое "about-goal" не отображается при нажатии этой кнопки навигации. Мне нужно показывать контент «о цели» при нажатии кнопки About Me , а также чтобы домашняя страница отображалась на той же странице при нажатии кнопки Home . Пожалуйста, помогите.

PS: Я новичок в этом, просто пытаюсь создать свой первый сайт. Большое спасибо!

    $(document).ready(function(){
                $('a').click(function(){
                    //alert("i am click");
                    var selected = $(this);
                    $('a').removeClass('active');
                    $(selected).addClass('active');

                });

                var $(a) = $('.a'),
                $b = $('.b'),
                $c = $('.c'),
                $d = $('.d'),
                $home = $('.home'),
                $aboutGoal = $('.aboutGoal');


                $a.click(function(){
                    $home.fadeIn();
                    $aboutGoal.fadeOut();

                });

                $b.click(function(){
                    $home.fadeOut();
                    $aboutGoal.fadeIn();

                });
            }); 

<ul>
  <li class="a"><a href="#">Home</a></li>
  <li class="b"><a href="#">About Me</a></li>
  <li class="c"><a href="#">My Gallery</a></li>
  <li class="d"><a href="#">Contact Me</a></li>
</ul>

<div class="aboutGoal">

  <div class="about-me">

    <h2>MY NAME IS...</h2>
    <p class="p1">My name is... , 23 yrs. Old. I’m an aspiring web developer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic
      looking websites.</p>
    <p class="p2">I’ve been a Service Desk Engineer in IBM and am a life-long learner who's always interested in expanding my skills.</p>


  </div>

  <div class="goals">
    <h2>MY GOALS...</h2>
    <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
    <ul class="skills">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>jQuery</li>
      <li>Photo Editing</li>
      <li>Video Editing</li>
    </ul>
    <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>

  </div>
</div>

Answer 1

сначала у вас есть опечатка с var $(a) = $('.a') измените ее на var $a = $('.a'),

вам не нужно делать событие щелчка для каждой ссылки

вы можете сделать что-то например,

присвойте каждой ссылке свойство PageSection, установите в качестве значения класс разделов, которые вы хотите скрыть / показать

, и присвойте ему тот же класс .nav, поэтому мы можем записать только одно событие клика

<li pageSection="aboutGoal" class="nav">

поместить каждый раздел раздела страницы внутри контейнера div, чтобы мы могли затемнять их все вместе, нажимая ссылку

<div id="Pages">  

, а затем использовать это событие нажатия

$(document).ready(function () {
  //view only home section first time
  $("#Pages").children().hide();
  $(".Home").show();

  //when clicking  on a  li element with class nav
  $("li.nav").click(function () {
    //fadout every div  inside Pages div
    $("#Pages").children().fadeOut();
    // FadeIn  element with class  is the same name as the pageSection property from the Li we clicked
    $("." + $(this).attr("pageSection")).fadeIn();
    //remove active class for every li element with class nav
    $("li.nav").removeClass("active");
    //add active class for the li element we clicked
    $(this).addClass("active");
  });
});

живой пример: https://codepen.io/vkv88/pen/gOaLgrj?editors=0010