重新加载时记住菜单状态答案

【问题标题】：Remember menu state on reload重新加载时记住菜单状态
【发布时间】：2013-08-30 02:13:01
【问题描述】：

我想创建一个功能与本网站完全相同的导航菜单：http://www.rex-ny.com/

我宁愿只使用 HTML 和 CSS，但我尝试了一整天都找不到解决方案。

当我选择一个菜单项时，我希望该菜单在页面加载后保持打开状态。这可能吗？
我还想让主菜单项可点击，以便它们加载一个新页面，并且当该页面加载时该菜单处于打开状态。

这是我目前所拥有的：

这里是 jquery：

$(document).ready(function () {
    $('#menu > li > a').click(function(){
        if ($(this).attr('class') != 'active'){
            $('#menu li ul').hide();
            $(this).next().toggle();
            $('#menu li a').removeClass('active');
            $(this).addClass('active');
        }
    });
});

还有 CSS：

#menu {
    float: left;
}
#menu li a {
    display: block;
}
#menu li ul {
    display: none;
}

【问题讨论】：

如果不使用 localStorage (HTML5) 或服务器语言，这听起来是不可能的。请记住，浏览器是无状态的，因此如果没有服务器/存储帮助，它就不会记住这些内容。
使用cookies或localstorage
这不是不可能的...您可以在每个页面的正文中添加一个类，在每个菜单项上添加一个 id，然后在 CSS 中设置样式，.home #home, .page #page { color: red; }
您也可以使用ajax加载页面而无需刷新页面-.load()
检查我的答案，看看是否有帮助。

标签： javascript jquery html css

【解决方案1】：

您可以使用纯 HTML 和 CSS 来做到这一点。假设你有这样的结构：

- site
  + css
  + js
    index.html
    about.html

您可以在每个页面的正文中添加一个类，因此index 用于index.php 和about 用于about.php：

<body class="about">

然后在您的菜单中，为与该页面对应的每个项目添加一个 id（如果您计划在许多地方使用该菜单，则添加一个类）：

<ul id="menu">
  <li id="index" class="active"><a href="index.html"></li>
  <li id="about"><a href="about.html"></li>
</ul>

最后，您可以使用 CSS 为每个页面专门设置菜单项的样式：

.index #index,
.about #about,
#menu .active {
  // styles for active item
}

【讨论】：

谢谢，这引导我朝着正确的方向前进。我使用了 .index #index > ul {} 并且不需要 class="active" 标签
知道为什么这在 Internet Explorer 中不适合我吗？这是网站jaws.ac.. 请注意菜单在 IE 中无法打开。跟等级有关系吗？