0

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

点击后主菜单弹出

主菜单有类别链接点击类别链接和菜单推出一个子菜单 - 新类别菜单从子菜单类别中选择一个子菜单链接一旦点击子菜单链接并加载到被点击的链接菜单应该保存它所在的状态在级别按点击。

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

我正在谈论的示例的链接是这个。

我不确定如何做到这一点，因为我还没有实施任何体面的解决方案来说明我希望如何做到这一点。

提前致谢。:)

4

1 回答 1

0

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

首先 - 您可以使用 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;
    }
})();
于 2013-11-14T18:54:21.880 回答