Question

我目前正在开发一个网站，我正在使用一个名为one page scroll master的插件。链接位于：https://github.com/peachananr/onepage-scroll/blob/master/README.md。

一切都运行良好但是我在顶部有一个固定的标题，有4个菜单链接。我想要的是当你点击链接例如'about'时，它会滚动到about页面并突出显示about链接。同时，当用户决定滚动页面时，我希望根据他所在的页面突出显示链接，例如，如果他滚动到投资组合页面，则突出显示投资组合链接。

到目前为止，我已经完成了这项工作，但滚动页面时链接不会突出显示。它只会在您单击实际链接时突出显示。

    $(document).ready(function(){
     $('#home').css('color','white');

$("#home").on("click", function(){
 $(".main").moveTo(1);
   $("#contact").removeAttr("style");
  $("#about").removeAttr("style");
  $("#portfolio").removeAttr("style");
});
});

$(document).ready(function(){


$("#about").on("click", function(){
 $(".main").moveTo(2);
 $('#about').css('color','white');
  $("#contact").removeAttr("style");
  $("#home").removeAttr("style");
  $("#portfolio").removeAttr("style");
});
});

$(document).ready(function(){

$("#portfolio").on("click", function(){
 $(".main").moveTo(3);
 $('#portfolio').css('color','white');
  $("#about").removeAttr("style");
  $("#home").removeAttr("style");
  $("#contacct").removeAttr("style");
});
});

$(document).ready(function(){

$("#contact").on("click", function(){
 $(".main").moveTo(4);
 $('#contact').css('color','white');
  $("#about").removeAttr("style");
  $("#home").removeAttr("style");
  $("#portfolio").removeAttr("style");
});
});

非常感谢任何帮助！

Answer 1

说实话，你的代码与你想要的东西截然不同。我会用新代码回答你的问题，好吗？

首先，将它放在您拥有的每个菜单链接上：

data-target="#id"

更改ID的ID（#about，＃port ...）

确定。现在在body标签的底部，你可以输入你的脚本标签：

$(document).ready(function() {

    $('#nav li a').click(function() {

        $('#nav li a').removeClass('active');

        $(this).addClass('active');

        var target = $(this).attr("data-target");

        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 2000);

    });

});

如何在一页滚动主插件中的每个页面（部分）上突出显示菜单链接？

1 个答案: