javascript - 为什么当我单击导航按钮时 jQuery fadeIn 和 fadeOut 不起作用？

Question

单击此导航按钮后，不会显示“about-goal”的内容。我需要在单击“关于我”按钮时显示“关于目标”内容，并且在单击“主页”按钮时在同一页面上显示主页。请帮忙。

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 中，以便我们可以在单击链接时将它们全部淡出

<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