如何保持頁面重新加載菜單狀態

Question

我有以下代碼片段，想知道是否有可能通過更新來實現此菜單行為：

步驟1.在鼠標懸停鏈接1 ---->上，它將轉換為1.5em到右側（已設置）；

步驟2.在Link 1上，單擊---->，菜單按鈕也將保持在頁面重新加載的位置（已完成，特別感謝@ guest271314 ） ，直到 再次 單擊新菜單按鈕 （未設置） 為止 ）， 然后加載另一個頁面 。

注意：“下一個/上一個”按鈕的“代碼”部分保持不變（或必須編輯才能保持其功能）。

注意2：最后，我不得不提到，該解決方案將在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評論：

此狀態將應用於所有用戶 （我認為？，這是最好的選擇，只要菜單將顯示在每個頁面上，而不受瀏覽器類型或會話的限制）；

另外，關於存儲位置，在服務器端本地保存狀態不是問題，但是如果我有一些贊成/反對意見，可以做出正確的決定，那將會很好。

最后，如果有幫助，為了查看整個圖片，您可以使用此實時鏈接作為示例 ； 這里有一個與上述類似的菜單，並且關於狀態，如果這里有一個可以實現的模型，我會很高興找到它。

Answer 1

您可以將菜單（和頁面）狀態保存在localStorage變量中。 在頁面加載時，檢查變量是否存在，並設置正確的鏈接/頁面狀態。

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