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

【问题标题】：How to have menu link highlighted on each page (section) in one page scroll master plugin?如何在一个页面滚动主插件的每个页面（部分）上突出显示菜单链接？
【发布时间】：2015-08-12 18:34:31
【问题描述】：

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

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

到目前为止，我已经这样做了，但是在滚动页面时链接不会突出显示。它仅在您单击实际链接时突出显示。

    $(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");
});
});

非常感谢任何帮助！

【问题讨论】：

标签： javascript jquery html css jquery-plugins

【解决方案1】：

说实话，您的代码与您想要做的完全不同。我会用新代码回答你的问题，好吗？

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

data-target="#id"

为您的 id 更改 id（#about、#port ...）

好的。现在在 body 标签的底部，您可以放置您的 script 标签和这个：

$(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);

    });

});

【讨论】：