Question

我正在尝试保存菜单的状态，因为从菜单中单击了链接并加载了新页面。这是一个多级推送菜单，在每个类别下都有类别和子类别链接。

单击

后，主菜单会启动

主菜单包含类别链接单击类别链接和菜单将推出子菜单 - 新类别菜单从子菜单类别中选择子菜单链接单击子菜单链接并加载到单击的链接菜单应按照点击次数保存级别中的状态。

如果点击某个类别下的链接，则该类别的标题仍应存在。目前正在发生的事情是，当我点击某个类别下的链接时，它会加载点击链接的页面，但菜单会重置并返回到顶层。

我正在谈论的样本的链接是this。

我不知道该如何做到这一点，因为我没有实现任何像样的解决方案。

提前致谢。：）

Answer 1

嗯，根据您的总体目标，有几种方法可以实现。

首先 - 您可以使用cookie来保存页面之间的状态。这很容易实现，不需要任何服务器端代码。

第二 - 你甚至可以使用数据库，但除非你已经在使用数据库，否则这有点过分。

第三 - 使用Javascript根据当前页面位置确定菜单的位置。这是我的建议 - 它非常快/轻松/轻巧。从理论上讲，如果用户导航到一个页面，那么他们就会通过菜单进入，并且每次都会在菜单中的确切位置。

这是使用直接Javascript的快速示例。此代码是动态生成的基本菜单，它根据当前URL设置活动菜单项的类。您可以轻松地使用嵌套菜单完成类似的操作。如果您有任何问题，请查看并告诉我们：

(function () {
    var html = "<div class=\"menu\">" +
                      "<div id=\"Page1MenuItem\"><a href=\"page1.html\">Page1</a></div>" +
                      "<div id=\"Page2MenuItem\"><a href=\"page2.html\">Page2</a></div>" +
                      "<div id=\"Page3MenuItem\"><a href=\"page3.html\">Page3</a></div>" +
                      "<div id=\"Page4MenuItem\"><a href=\"page4.html\">Page4</a></div>" +
                      "<div id=\"Page5MenuItem\"><a href=\"page5.html\">Page5</a></div>" +
                "</div>";
    document.getElementById("MenuContainer").innerHTML = html;
    var currentUrl = window.location.pathname.toLowerCase();
    switch (currentUrl) {
        case "/page1.html":
            document.getElementById("Page1MenuItem").setAttribute("class", "current");
            break;
        case "/page2.html":
            document.getElementById("Page2MenuItem").setAttribute("class", "current");
            break;
        case "/page3.html":
            document.getElementById("Page3MenuItem").setAttribute("class", "current");
            break;
        case "/page4.html":
            document.getElementById("Page4MenuItem").setAttribute("class", "current");
            break;
        case "/page5.html":
            document.getElementById("Page5MenuItem").setAttribute("class", "current");
            break;
    }
})();

如何使用JavaScript保存菜单状态

1 个答案: