如何保持页面重新加载菜单状态
我有下面的代码片段，想知道是否有可能更新它实现这个菜单行为：
步骤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> <a href="#" id="nextPage" class="hidden">Next</a> <span id="msg"></span> </div>
LE：关于@Lars评论：
这个状态会被所有的用户使用 （我想，只要菜单在每个页面上显示，不受浏览器types或会话的影响，这是最好的select）。
另外关于存储位置，在本地和服务器端保存状态并不是一个问题，但是如果我有一些正反两面做出正确的决定，这将是非常好的。
最后，如果这有帮助，为了看到整个画面，你可以使用这个实时链接作为例子 ; 有一个类似的菜单与上面描述的有关状态，如果有一个模型可以在这里实现，我会很高兴find它。
您可以将菜单（和页面）状态保存在localStoragevariables中。 在页面加载时检查variables是否存在，并设置正确的链接/页面状态。
