Question

我使用Javascript函数来选择菜单项：

function selectActiveMenuItem() {
        var path = location.pathname + location.search + location.hash;
        var links = null;

        links = $("a[href='" + path + "']");

        links.parents("li").each(function () {
            $(this).addClass('current').closest('li').addClass('current');
        });
    }

工作很奇怪 - 加载主页时从一开始就无法正常工作。未选择菜单中的主页链接。我必须单击菜单项（主页或其他），然后再次加载页面并选择右侧菜单项。

以前我只使用var path = location.pathname;而没有location.search，然后从开始就运行良好。但现在我的链接更加复杂了 - 例如它们：http://localhost//MainApp/User/Order.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1&type=NMO，其他的是http://localhost//MainApp/User/Order.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1&type=MO。所以我必须使用location.pathname + location.search来使我的功能发挥作用。

我也尝试使用var path = location.href.replace(/^.*\/\/[^\/]+/, '');但效果与var path = location.pathname + location.search;相同 - 加载页面时未在菜单中选择主页。

问题：如何在加载页面时在菜单中选择主页？

Answer 1

您是否可以使用[href^= ... ]语法来忽略哈希和查询？

function selectActiveMenuItem() {
    $('a[href=^' + location.pathname + ']').parents('li').each(function () {
        $(this).addClass('current').closest('li').addClass('current');
    });
}

Answer 2

我不得不添加检查主页链接。现在功能正常，它看起来像：

function selectActiveMenuItem() {
        var path = location.pathname + location.search + location.hash;
        var createhomelink = null;
        var homepath = null;
        var links = null;
        createhomelink = path + "&from=user";
        homepath = document.getElementById("home").href.replace(/^.*\/\/[^\/]+/, '');

        if (createhomelink == homepath) {
            path = createhomelink;
        }

        links = $("a[href='" + path + "']");

        links.parents("li").each(function () {
            $(this).addClass('current').closest('li').addClass('current');
        });
    }

使用location.pathname + location.search选择菜单项

2 个答案: