如何保持页面重新加载菜单状态

我有下面的代码片段,想知道是否有可能更新它实现这个菜单行为:

步骤1:在鼠标hover链接1 —->将翻译1.5em向右(已设置);

第二步:在链接1上单击—->菜单button将保持固定在已翻译的位置(完成后,特别感谢@ guest271314 ) 在页面重新加载,直到一个新的菜单button被点击 (未设置然后) 和另一个页面加载

注意:next / prevbutton的代码段,保持不变(如果必须的话可以编辑,以保持function)。

注2:我不得不提到,最终,解决scheme将在wordpress中实现,而不是成为一个静态的html页面。

 $(function () { $('nav ul li').click(function (e) { //Set the aesthetics (similar to :hover) $('nav ul li') .not(".clicked").removeClass('hovered') .filter(this).addClass("clicked hovered") .siblings().toggleClass("clicked hovered", false); }).hover(function () { $(this).addClass("hovered") }, function () { $(this).not(".clicked").removeClass("hovered") }); var pageSize = 4, $links = $(".pagedMenu li"), count = $links.length, numPages = Math.ceil(count / pageSize), curPage = 1; showPage(curPage); function showPage(whichPage) { var previousLinks = (whichPage - 1) * pageSize, nextLinks = (previousLinks + pageSize); $links.show(); $links.slice(0, previousLinks).hide(); $links.slice(nextLinks).hide(); showPrevNext(); } function showPrevNext() { if ((numPages > 0) && (curPage < numPages)) { $("#nextPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#nextPage").addClass('hidden'); } if ((numPages > 0) && (curPage > 1)) { $("#prevPage").removeClass('hidden'); $("#msg").text("(" + curPage + " of " + numPages + ")"); } else { $("#prevPage").addClass('hidden'); } } $("#nextPage").on("click", function () { showPage(++curPage); }); $("#prevPage").on("click", function () { showPage(--curPage); }); }); 
 .hidden { display: none; } body { font: normal 1.0em Arial, sans-serif; } nav.pagedMenu { color: red; font-size: 2.0em; line-height: 1.0em; width: 8em; position: fixed; top: 50px; } nav.pagedMenu ul { list-style: none; margin: 0; padding: 0; } nav.pagedMenu ul li { height: 1.0em; padding: 0.15em; position: relative; border-top-right-radius: 0em; border-bottom-right-radius: 0em; -webkit-transition: -webkit-transform 220ms, background-color 200ms, color 500ms; transition: transform 220ms, background-color 200ms, color 500ms; } nav.pagedMenu ul li.hovered { -webkit-transform: translateX(1.5em); transform: translateX(1.5em); } nav ul li:hover a { transition: color, 1200ms; color: red; } nav.pagedMenu ul li span { display:block; font-family: Arial; position: absolute; font-size:1em; line-height: 1.25em; height:1.0em; top:0; bottom:0; margin:auto; right: 0.01em; color: #F8F6FF; } a { color: gold; transition: color, 1200ms; text-decoration: none; } #pagination, #prevPage, #nextPage { font-size: 1.0em; color: gold; line-height: 1.0em; padding-top: 250px; padding-left: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="pagedMenu"> <ul style="font-size: 28px;"> <li class="" style="margin-bottom: 5px;"><a href="#">Link 1</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 2</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 3</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 4</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 5</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 6</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 7</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 8</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 9</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 10</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 11</a></li> <li class="" style="margin-bottom: 5px;"><a href="#">Link 12</a></li> </ul> </nav> <div id="pagination"> <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp; <a href="#" id="nextPage" class="hidden">Next</a> <span id="msg"></span> </div> 

LE:关于@Lars评论:

这个状态会被所有的用户使用 (我想,只要菜单在每个页面上显示,不受浏览器types或会话的影响,这是最好的select)。

另外关于存储位置,在本地和服务器端保存状态并不是一个问题,但是如果我有一些正反两面做出正确的决定,这将是非常好的。

最后,如果这有帮助,为了看到整个画面,你可以使用这个实时链接作为例子 ; 有一个类似的菜单与上面描述的有关状态,如果有一个模型可以在这里实现,我会很高兴find它。

您可以将菜单(和页面)状态保存在localStoragevariables中。 在页面加载时检查variables是否存在,并设置正确的链接/页面状态。

https://github.com/julien-maurel/jQuery-Storage-API