1 回答

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
- 1 回答
- 0 關注
- 175 瀏覽
添加回答
舉報