Question

我使用下面的简单代码在浏览器中添加了一个具有当前URL的菜单项：

 jQuery(document).ready(function(){
    jQuery(".menuzord-menu a").each(function(){ 
        if(jQuery(this).attr('href') == document.URL){
            jQuery(this).addClass('active');
        }
    });
   });

这适用但在应用活动类之前有一点延迟。这是达到预期效果的正确方法吗？如果是这样，它如何进行优化以便不会出现延迟？

Answer 1

尝试在窗口加载时执行each()函数：

$(window).load(function() {
    jQuery(".menuzord-menu a").each(function(){ 
      if(jQuery(this).attr('href') == document.URL){
        jQuery(this).addClass('active');
      }
    });
});

Answer 2

您可以使用此选择器代替使用foreach循环：

jQuery(".menuzord-menu a[href='" + document.URL + "']").addClass('active');

这应该有更好的表现，可能会摆脱那么小的延迟。

然而，如果你仍然有相同的延迟，它可能是由其他东西引起的（可能是CSS动画或javascript代码执行的延迟）。

Answer 3

延迟主要由.ready()引起，因为它会等到DOM完全加载，这通常是一种很好的做法，但不是在你的情况下。我建议的解决方法是在.menuzord-menu元素之后运行这是一个内联脚本，而不是.ready()：

jQuery(".menuzord-menu a").each(function(){ 
    if(jQuery(this).attr('href') == document.URL){
        jQuery(this).addClass('active');
    }
});

显示基于URL的活动页面

3 个答案: