Question

我正在看看stackoverflowe很长一段时间，现在它发生了 - 必须第一次问一个问题，所以这里是：

我有一个页面，锚点菜单贴在浏览器顶部（因此它始终可见，等等），关键是我试图让活动的（这一个的可见内容）锚定另一种颜色而不是非活动的颜色。

例如我有一个带链接的菜单（menu1，menu2）和menu1的内容，以及menu2的内容。当我看到menu1的内容时，链接“menu1”为绿色，menu2为红色当我看到menu2的内容时，链接“menu2”为绿色，menu1为红色

我希望它清楚。

我试过jqueryinview，但我不完全理解它，据我所知这个全局它应该这样工作：当浏览器看到classA 然后将classB添加到classC

其中classA是content，classB是菜单中“active”锚的样式，classC是菜单中的锚。

我真的会帮助你。

Answer 1

这是我一直使用jQuery突出显示当前菜单项

的完美方式

$(function () {
  var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
  $('[href$="'+url+'"]').parent().addClass("active");
});

准备好DOM

$( document ).ready(function() {
    $(function () {
      var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
      $('[href$="'+url+'"]').parent().addClass("active");
    });
});

Answer 2

jQuery inview是一个很好的解决方案。你需要的是一个js代码，它计算内容元素与顶部窗口偏移的顶部偏移量。如果是近似值，则将活动类添加到相对菜单中。

检查https://github.com/zuk/jquery.inview，我正在使用jQuery 1.10，它运行得很好。基本用法是：

$(el).on("inview", function(ev,visible){
        if (visible) 
            something();
    });

当Anchor URL可见时，更改锚类

2 个答案: