0

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

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

1 回答 1

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

于 2020-04-21T15:57:10.507 回答