当用户返回页面时，如何使用jquery保持所选菜单处于活动状态？

Question

我有一个典型的菜单结构-

<Ul class="nav">
<li>Menu1</li>
<li>menu2</li>
-------
</ul>

当我点击某个菜单时，根据我在加载layout.html时编写的jquery，它会选择特定的菜单。

<script>
    jQuery(function(){
      jQuery('.nav>li>a').each(function(){
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
  </script>

但在该页面上，如果我单击某个链接，这会将我带到另一个页面，然后当我返回时，菜单项不会保持选中状态。

我如何修改我的jquery来实现这一点？提前感谢！

Answer 1

正如SJ-B所说，HTML5网络存储是一个很好的解决方案。

如果你不想用列表菜单点击一个或两个以上的页面，你可以在链接中添加一个查询，使你离开该页面，例如，你的列表菜单的id。

href="somepage.html可能会变成这样的href="somepage.html?menu_id=menu5

在使用window.history.back()时，您可以使用window.location.search从URL中提取id，并使用id选择list菜单。

Answer 2

尝试使用HTML5的Session对象。

sessionStorage.varName = id of selected item.

在加载时，只检查sessionStorage.varName是否有值或未定义，如果没有，则获取值

`var value = sessionStorage.varName;` and set it.

Answer 3

您可以使用简单的css代码。使用活动属性，如

a:active
{
 //Some style
}