记住页面刷新后的div悬停状态

Question

我有一个导航栏，当它悬停时会增加宽度。

以下是一个例子：

http://jsfiddle.net/Gsj27/822/

现在，例如，如果我在悬停效果应用的区域中有一个主页按钮，单击它并加载主页时结果如下：

页面加载了默认大小（小宽度）的导航区域，并且在实例之后，根据悬停效果，当悬停效果＆＃34;踢入＆＃34;时，它会增加宽度。

问题

如何在点击超链接之前使用悬停效果保持其状态正确加载页面？因此，在我的示例中，如果单击主页按钮，则加载主页，其中悬停效果已处于活动状态（因为主页按钮位于导航栏区域，因此悬停效果必将打开）。但是如果点击其他地方的超链接（例如我的示例中的灰色区域），则加载页面并关闭悬停效果。

我认为这可以使用js toggleClass实现吗？像

这样的东西

        $(document).ready(function(){
            if(/* hover effect was on */) {
                $('nav').toggleClass('hovered');
            }
        })

Answer 1

您可以在网址中保存状态：

<a href="?active=true">

if(window.location.href.indexOf('active=true') > 0) {
  $('.nav').addClass('hovered');
}

代码：http://jsfiddle.net/Gsj27/824/
演示：http://fiddle.jshell.net/Gsj27/824/show/

您也可以使用哈希（＃）来保存状态。