好的,标题可能有点难以理解,我会尝试解释。
所以我正在使用fullpage.js
我总共有9个部分: 家 关于(关于有关于第1节的延续的6个“的”) 接触
在菜单中只有3个导航选项Home,about,contact。我已经制作了菜单,以便在相应的部分添加活动类 - 就像使用现成的选项一样。 当我滚动并离开第一个关于部分时,活动类将被删除,菜单项不会突出显示。 所以这就是我希望活跃类继续关注的所有“缺点”。因此,菜单项“关于”将突出显示,直到联系人部分。
我认为我可以使用一些“外部”JS,因此根据url,该类将被添加到ID为“all-about”的锚中:
$(document).ready(function () {
if (location.href.match(/#about1/ig) || location.href.match(/#about2/ig)){
$('#all-about').addClass('active');
}
});
这不起作用。 我会在整个页面中更改JS,或者如何更改我的代码?
谢谢!
答案 0 :(得分:3)
我会利用插件回调来实现这一点。
你可以使用afterLoad
这样的东西:
$.fn.fullpage({
slidesColor: ['red', 'blue'],
afterLoad: function(anchor, index){
var activeItem;
if(index == 1 || index == 2 || index == 3){
activeItem = $('#menu').find('li').first()
}else{
activeItem = $('#menu').find('li').last()
}
activeItem
.addClass('active')
.siblings().removeClass('active');
}
});
请注意,我不再使用menu
选项来处理活动类了。
答案 1 :(得分:2)
这是旧的,但对于其他任何人来说......此功能内置于Fullpage.js。只需更改" lockAnchors:false," to" lockAnchors:true,"在您的fullpage.js默认值中,或在您调用它时作为选项。然后你需要为你创建的#menu li.active添加你的css。完成。