Question

这个人花了我一点时间弄明白，所以我呼吁有人照亮我的一天。

如果你的菜单链接只包含#hashlocation，这段流行的代码非常有用 - 当你在页面的那一部分向下时，它会用活动类更新你的菜单项。

// Cache selectors
var topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href=#"+id+"]").parent().addClass("active");
});

我的问题，如果我的菜单包含非哈希标记的其他网页，特别是那些带有主题标签的页面，它显然不起作用，它们前面有完整的网址。

我需要调整此代码，以便它不会抛出“语法错误，无法识别的表达式”，并且还接受菜单可能包含指向其他位置的其他链接这一事实。

这是一个小提琴http://jsfiddle.net/stevenmunro/ytbhrz1g/2/

如果要在“Foo”散列之前删除完整的URL，它将起作用。

我试过

menuItems = topMenu.find('a[href*=#]'),

以及内的scrollItems = menuItems.map

var item = $($(this).attr("href").split("#"));
item = $("#" + item[1]);

参考

Change Active Menu Item on Page Scroll?

感谢您的帮助。

Answer 1

感谢James Hay让我走上正轨。这个建议与我已经尝试过的非常类似，不过它现在只是一个单行并且效果很好。

我也改变了;

menuItems = topMenu.find("a"),

到

menuItems = topMenu.find('a[href*=#]'),

并改变了;

menuItems
 .parent().removeClass("active")
 .end().filter("[href=#"+id+"]").parent().addClass("active");

到

menuItems
 .parent().removeClass("active")
 .end().filter("[href$=" + id + "]").parent().addClass("active");

只要菜单中的项目按顺序排列在页面上，就可以了。如果菜单项被扰乱，它将不会按预期更改。也许这也是我们可以解决的其他问题，但问题已得到解答，谢谢。

在页面滚动中将活动类添加到匹配的<a href="">hash in fixed menu</a>

1 个答案: