如何使用 JavaScript 保存菜单状态

How can I save menu state with JavaScript

本文关键字：菜单 状态 保存 JavaScript 何使用      更新时间：2023-09-26

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

点击后主菜单踢出

主菜单有类别链接单击类别链接，菜单推出子菜单 - 新类别菜单从子菜单类别中选择子菜单链接单击子菜单链接并加载到单击的链接后菜单应根据单击保存其在关卡中的状态。

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

指向我正在谈论的示例的链接是这样的。

我不确定如何做到这一点，因为我还没有实现任何体面的解决方案。

提前谢谢。 :)

嗯，有几种方法可以实现这一点，具体取决于您的总体目标是什么。

首先 - 您可以使用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;
    }
})();
相关文章：