亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么當我單擊導航按鈕時 jQuery fadeIn 和 fadeOut 不起作用?

為什么當我單擊導航按鈕時 jQuery fadeIn 和 fadeOut 不起作用?

慕婉清6462132 2024-01-22 15:33:59
單擊此導航按鈕后,不會顯示“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>
查看完整描述

1 回答

?
犯罪嫌疑人X

TA貢獻2080條經驗 獲得超4個贊

首先你有一個拼寫錯誤,將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


查看完整回答
反對 回復 2024-01-22
  • 1 回答
  • 0 關注
  • 175 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號