如何保持页面重新加载时的菜单状态 [英] How to keep the menu state on page reload
问题描述
我有以下代码片段，想知道是否有可能更新它实现此菜单行为：
步骤1.鼠标悬停在链接1 ---->它将向右移动1.5em（已设置）;
步骤2.在链接1 点击---->菜单按钮将在已翻译的位置保持固定（完成，特别感谢 @ guest271314 ）在网页上重新载入，直到点击新的菜单按钮（尚未设置）并加载另一个网页。
注意：下一页/上一页按钮代码部分，保持不变（如果必须保留，则可以编辑）。
note2：我必须提到，最后，解决方案将在wordpress中实现而不是静态的 html 网页。
$（function（）{$（'nav ul li'）。类似于：hover）$（'nav ul li'）.not（。clicked）。removeClass（'hovered'）.filter（this）.addClass（clicked hovered）.siblings（）。toggleClass hover，false）;}）。hover（function（）{$（this）.addClass（hovered）}，function（）{$（this）.not ）}）; 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;位置：固定; top：50px;} nav.pagedMenu ul {list-style：none; margin：0; padding：0;} nav.pagedMenu ul li {height：1.0em; padding：0.15em;位置：相对; 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;右：0.01em;颜色：＃F8F6FF;} a {color：gold; transition：color，1200ms; text-decoration：none;}＃pagination，#prevPage，#nextPage {font-size：1.0em;颜色：金色; 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 =＃>链接1< / a>< / li& < li class =style =margin-bottom：5px;>< a href =＃>链接2< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接3< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接4< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接5< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接6< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接7< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接8< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接9< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接10< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接11< / a>< / li> < li class =style =margin-bottom：5px;>< a href =＃>链接12< / a>< / li> < / ul>< / nav>< div id =pagination> < a href =＃id =prevPageclass =hidden>上一页< / a>& nbsp;& nbsp; < a href =＃id =nextPageclass =hidden>下一页< / a> < span id =msg>< / span>< / div>
LE：关于@Lars评论：
这个状态会根据所有使用者套用最好的选项，只要菜单将显示在每个页面上，不受浏览器类型或会话的限制）;
还有关于存储位置，这不是问题在本地，服务器端保存状态，但如果我有一些pro / cons做出正确的决定将是巨大的;
最后，如果这有助于您查看整个图片，可以使用此直播链接作为示例;有一个类似的菜单与上述和关于状态，如果有一个模型，可以在这里实现，我会很高兴找到它。
您可以在localStorage变量中保存菜单（和页面）状态。页面加载检查变量是否存在，并设置正确的链接/页面状态。
https://github.com/julien-maurel/jQuery-Storage-API
I have the following code snippet and wanted to know if there is a possibility to update it achieving this menu behaviour:
Step 1. On mouse hover Link 1 ----> it will be translated 1.5em to the right (already set);
Step 2. On Link 1 click ----> the menu button will remain fixed in place at the already translated position (done, special thanks to @guest271314) on the page reload too, until a new menu button is clicked (not set yet) and another page is loaded.
note: next/prev buttons code section, remain unchanged (or can be edited if it's a must, in order to remain functional).
note2: I have to mention that in the end, the solution will be implemented in wordpress not into a static html sitepage.
$(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: regarding @Lars comment:
This state will be applied per all users (I think?, it's the best option as long as the menu will be displayed on every pages, unconditioned by the browser type or the session);
Also regarding the storage location, it's not a problem saving the state locally, server side, but it will be great if I have some pro/cons to make the right decision;
In the end, if this helps, in order to see the whole picture, you can use this live link as example; there is a similar menu with the above described and regarding the state, if there is a model that could be implemented here, I'll be glad to find it.
You can save menu (and page) status in a localStorage variable. On page load check if the variable exists and set correct Link/page status.
https://github.com/julien-maurel/jQuery-Storage-API
这篇关于如何保持页面重新加载时的菜单状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
