使用过滤器时的 JQuery 活动菜单问题

【问题标题】：JQuery active menu Issue while using filters使用过滤器时的 JQuery 活动菜单问题
【发布时间】：2012-03-28 15:25:25
【问题描述】：

我正在使用这个 jQuery 代码来突出显示活动菜单：

$(function(){
   var path = location.pathname.substring(1);
   if ( path )
     $('#topnav a[href$="' + path + '"]').attr('class', 'active');
 });

它工作正常。问题出在菜单页面之一，我使用的是字母过滤器。所以当我点击任何一个字母来过滤用户时，高亮就会消失。

我该如何解决这个问题？

【问题讨论】：

为什么不让服务器使用active 类为您服务，而不必使用JQuery？
你能提供你的问题的演示代码吗？

标签： jquery menu highlight

【解决方案1】：

function extractPageName(hrefString) {
    var arr = hrefString.split('/');
    return (arr.length < 2) ? hrefString : arr[arr.length - 2].toLowerCase() + arr[arr.length - 1].toLowerCase();
}

function setActiveMenu(arr, crtPage) {
    for (var i = 0; i < arr.length; i++) {
        if (extractPageName(arr[i].href) == crtPage) {
            if (arr[i].parentNode.tagName != "DIV") {
                arr[i].className = "selected";
                arr[i].parentNode.className = "selected";
            }
        }
    }
}

function setPage() {
    hrefString = document.location.href ? document.location.href : document.location;

    if (document.getElementById("navigation") != null)
        setActiveMenu(document.getElementById("navigation").getElementsByTagName("a"), extractPageName(hrefString));
}

并在 html 代码的末尾添加这个函数（在最后一个 div 之后）

设置页面（）

【讨论】：